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

Question

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)"

Answer 1

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.