CODEWITHSUNDEEP
javascriptreactjsfetchvimeovimeo-api
JeremyF
JeremyF

Reputation: 745

Vimeo API list of albums or videos returns 200 but no list. (in react native)

My goal is to fetch a list of albums or list of videos in Vimeo from my Vimeo account where everything is private. I am using React Native and the javascript fetch function...

fetch(`https://api.vimeo.com/users/13477675/albums?client_id=<CLIENT_ID>`,{
            method: 'GET',
            page: 1,
            headers: new Headers({
                'Content-Type': 'application/vnd.vimeo.*+json',
                "Authorization" : "Bearer <TEST_TOKEN>"
            })
        }).then((response)=>{
            console.log('RESPONSE: '+JSON.stringify(response));
        });

I get a JSON response where the status code is 200, just like it is suppose to be. However, I do not get a list of albums or videos or anything of the sort. (When I use the Vimeo playground I do get a list of albums or videos as expected and am using the same information there...)

Here is what I get in response:

{"type":"default","status":200,"ok":true,"statusText":200,"headers":{"map":{"x-ratelimit-remaining":["95"],"x-ratelimit-limit":["100"],"expires":["Fri, 21 Apr 2028 00:26:23 GMT"],"connection":["keep-alive"],"cache-control":["no-cache, max-age=315360000"],"vary":["Accept,Vimeo-Client-Id,Accept-Encoding"],"content-type":["application/vnd.vimeo.album+json"],"date":["Tue, 24 Apr 2018 00:26:23 GMT"],"content-encoding":["gzip"],"via":["1.1 varnish, 1.1 varnish"],"x-cache-hits":["0, 0"],"accept-ranges":["bytes"],"strict-transport-security":["max-age=15552000; includeSubDomains; preload"],"x-cache":["MISS, MISS"],"x-ratelimit-reset":["2018-04-24T00:41:23+00:00"],"x-served-by":["cache-iad2143-IAD, cache-dca17724-DCA"],"age":["0"],"server":["nginx"],"x-timer":["S1524529583.137340,VS0,VE316"],"content-length":["3391"]}},"url":"","_bodyInit":{"listeners":{},"isRNFetchBlobPolyfill":true,"multipartBoundary":null,"_ref":"/Users/jeremyfrancis/Library/Developer/CoreSimulator/Devices/E1D3C5D3-5FF7-4C3A-81A4-B6A823F8A7AF/data/Containers/Data/Application/8AA6BEA8-EE15-4E6E-8AE2-A31CC571E19E/Documents/RNFetchBlob-blobs/blob-tb4fwue6s2ls7tjhcl8b","_blobCreated":true,"_closed":false,"cacheName":"blob-tb4fwue6s2ls7tjhcl8b","type":"text/plain","size":86998},"_bodyBlob":{"listeners":{},"isRNFetchBlobPolyfill":true,"multipartBoundary":null,"_ref":"/Users/jeremyfrancis/Library/Developer/CoreSimulator/Devices/E1D3C5D3-5FF7-4C3A-81A4-B6A823F8A7AF/data/Containers/Data/Application/8AA6BEA8-EE15-4E6E-8AE2-A31CC571E19E/Documents/RNFetchBlob-blobs/blob-tb4fwue6s2ls7tjhcl8b","_blobCreated":true,"_closed":false,"cacheName":"blob-tb4fwue6s2ls7tjhcl8b","type":"text/plain","size":86998}}

And here is where I am looking in Vimeo Dev API: https://developer.vimeo.com/api/reference/albums

UPDATE

I have updated my code to use .json() as follows...

fetch(`https://api.vimeo.com/users/13477675/albums?client_id=<CLIENT_ID>`,{
        method: 'GET',
        page: 1,
        headers: new Headers({
            'Content-Type': 'application/vnd.vimeo.*+json',
            "Authorization" : "Bearer <TEST_TOKEN>"
        })
    }).then(response => response.json()).then((response)=>{
        console.log('RESPONSE: '+JSON.stringify(response));
    }).catch((error)=>{console.log(error.message});

This catches an error and prints: "Unable to resolve data for blob: (null)"

Upvotes: 1

Views: 782

Answers (2)

JeremyF
JeremyF

Reputation: 745

I solved my problem. I realized React Native does not work well with things like this but the react-native-fetch-blob npm package fixes this problem. Here is my new working code:

RNFetchBlob.fetch('GET',`https://api.vimeo.com/users/13477675/albums?client_id=${client_id}`,{
        "Authorization" : "Bearer <TOKEN>"
    }).then((data)=>{
        console.log(data);
    });

That's it! I get the correct JSON returned.

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370989

The return value of a fetch call is a Response object. It's not the actual object you want - it's a stream that has to be parsed into an object (or to text, or whatever) before it can be used.

Since you're dealing with JSON, you need to direct the response to parse the JSON into an object:

fetch(`https://api.vimeo.com/users/13477675/albums?client_id=<CLIENT_ID>`, {
  method: 'GET',
  page: 1,
  headers: new Headers({
    'Content-Type': 'application/vnd.vimeo.*+json',
    "Authorization": "Bearer <TEST_TOKEN>"
  })
})
  .then(response => response.json())
  .then(responseObject => {
    console.log('RESPONSE: ' + JSON.stringify(responseObject));
    console.log(responseObject.type);
  });

There's not many useful things you can do with the Response object before you parse it, other than checking its ok property.

Upvotes: 1

Related Questions