NetworkError: response.text is not a function

Today, I ran an innocent little deployment, like every day, and suddenly my website was gone (thank god, staging server). All my apollo requests during SSR would return with the above mentioned NetworkError.

Here is what I had in my package.json:

    "apollo-client-preset": "^1.0.3",
    "apollo-fetch": "^0.6.0",
    "apollo-link-batch-http": "^1.0.1",
    "apollo-link-error": "^1.0.1",
    "apollo-cache-inmemory": "^1.1.1",
    "react-apollo": "^2.0.1",

After four hours of frustratingly digging through nginx & uwsgi logs and handcrafting gql requests with curl, I dawned on me that maybe my webserver and my backend are fine and somehow my node_modules environment might be messed up.

So I compared my local packages to the ones on the server via yarn list:

Here is what I had on my local machine, which works:

├─ apollo-cache-inmemory@1.1.1
│  ├─ apollo-cache@^1.0.1
│  ├─ apollo-utilities@^1.0.2
│  └─ graphql-anywhere@^4.0.1
├─ apollo-cache@1.0.1
│  └─ apollo-utilities@^1.0.2
├─ apollo-client-preset@1.0.3
│  ├─ apollo-cache-inmemory@^1.1.1
│  ├─ apollo-client@^2.0.3
│  ├─ apollo-link-http@1.1.0
│  ├─ apollo-link@1.0.0
│  └─ graphql-tag@^2.4.2
├─ apollo-client@2.0.3
│  ├─ @types/async@2.0.45
│  ├─ @types/zen-observable@^0.5.3
│  ├─ apollo-cache@^1.0.1
│  ├─ apollo-link-dedup@^1.0.0
│  ├─ apollo-link@^1.0.0
│  ├─ apollo-utilities@^1.0.2
│  ├─ symbol-observable@^1.0.2
│  └─ zen-observable@^0.6.0
├─ apollo-fetch@0.6.0
│  └─ isomorphic-fetch@^2.2.1
├─ apollo-link-batch-http@1.0.1
│  ├─ apollo-fetch@^0.6.0
│  ├─ apollo-link-batch@^1.0.1
│  └─ graphql@^0.11.0
├─ apollo-link-batch@1.0.1
├─ apollo-link-dedup@1.0.2
├─ apollo-link-error@1.0.1
├─ apollo-link-http@1.1.0
├─ apollo-link@1.0.0
│  ├─ apollo-utilities@^0.2.0-beta.0
│  ├─ apollo-utilities@0.2.0-rc.3
│  └─ zen-observable@^0.6.0
├─ apollo-utilities@1.0.2

And here is what I had on the server, which does not work:

├─ apollo-cache-inmemory@1.1.9
│  ├─ apollo-cache@^1.1.4
│  ├─ apollo-utilities@^1.0.8
│  └─ graphql-anywhere@^4.1.5
├─ apollo-cache@1.1.4
│  └─ apollo-utilities@^1.0.8
├─ apollo-client-preset@1.0.8
│  ├─ apollo-cache-inmemory@^1.1.7
│  ├─ apollo-client@^2.2.2
│  ├─ apollo-link-http@^1.3.1
│  ├─ apollo-link@^1.0.6
│  └─ graphql-tag@^2.4.2
├─ apollo-client@2.2.5
│  ├─ @types/async@2.0.47
│  ├─ @types/zen-observable@^0.5.3
│  ├─ apollo-cache@^1.1.4
│  ├─ apollo-link-dedup@^1.0.0
│  ├─ apollo-link@^1.0.0
│  ├─ apollo-utilities@^1.0.8
│  ├─ symbol-observable@^1.0.2
│  └─ zen-observable@^0.7.0
├─ apollo-fetch@0.6.0
│  └─ isomorphic-fetch@^2.2.1
├─ apollo-link-batch-http@1.1.0
│  ├─ apollo-link-batch@^1.1.0
│  ├─ apollo-link-http-common@^0.2.1
│  └─ apollo-link@^1.2.0
├─ apollo-link-batch@1.1.0
│  └─ apollo-link@^1.2.0
├─ apollo-link-dedup@1.0.7
│  └─ apollo-link@^1.2.0
├─ apollo-link-error@1.0.6
│  └─ apollo-link@^1.2.0
├─ apollo-link-http-common@0.2.1
│  └─ apollo-link@^1.2.0
├─ apollo-link-http@1.4.0
│  ├─ apollo-link-http-common@^0.2.1
│  └─ apollo-link@^1.2.0
├─ apollo-link@1.2.0
│  ├─ @types/node@^9.4.6
│  ├─ @types/zen-observable@0.5.3
│  ├─ apollo-utilities@^1.0.0
│  ├─ zen-observable@^0.8.0
│  └─ zen-observable@0.8.6
├─ apollo-utilities@1.0.8

To fix this:

I simply pinned all the working versions in my package.json to the exact versions (I added the packages that were not in my package.json and I removed the ^ from all version numbers). Then I wiped node_modules on the server and made a new deployment.

What I don’t understand:

Both, on my MacBook and on the Ubuntu server I have:

• node version is 9.0.4
• yarn version is 1.3.2
• npm version is 5.6.0

How can it be that yarn install installs packages with vastly different version numbers on both machines? This is the fist time I ended up in dependency hell like this, I never had to remove the ^ from a package.json, until now.

[TiE23]

I’m sorry that my story won’t help OP but might assist those with this error experiencing issues trying to write a custom fetch for Apollo Link.

I was having the same error Network error: response.text is not a function when I was simply trying to create a custom fetch for apollo link (inspired by this article). I solved it by making a simple change to the customFetch, where the article writer was dealing with a REST api that returned JSON in the response, whereas GraphQL returns text.

const customFetch = (uri, options) => {
  const initialRequest = fetch(uri, options);

  return initialRequest.then(response => (
    response.text()
  )).then((text) => {
    // ... If there is an error do something special HERE
    // ... Just passing things through as "OK"
    const result = {};
    result.ok = true;
    result.json = () => new Promise((resolve, reject) => {
      resolve(text);
    });
    return result;
  });
};

const httpLink = createHttpLink({
  uri: "http://localhost:4000",
  fetch: customFetch,
});

[jhd124]

look at this: https://developer.mozilla.org/en-US/docs/Web/API/Body/text. the response of fetcher should own a text method. In the module “apollo-link-http”

return new apolloLink.Observable(function (observer) {
              console.log('options', options)
                fetcher(chosenURI, options)
                    .then(function (response) {
                      console.log('before', response)
                    operation.setContext({ response: response });
                    console.log('after', operation)
                    return response;
                })
                    .then(apolloLinkHttpCommon.parseAndCheckHttpResponse(operation))
                    .then(function (result) {
                      console.log('result',result)
                    // we have data and can send it to back up the link chain
                    observer.next(result);
                    observer.complete();
                    return result;
                })
...

the error occurs at .then(apolloLinkHttpCommon.parseAndCheckHttpResponse(operation)) which calls the method response.text