React-apollo: BatchHttpLink: Error writing result to store for query

[edercampelo]

Hey react-apollo team,

Great work with this awesome project!

I started to work with GraphQL and Apollo this week and a question came up:

Intended outcome:
I'm trying to implement the BatchHttpLink in my ApolloClient with the following code:

import { ApolloClient } from 'apollo-client';
import { BatchHttpLink } from 'apollo-link-batch-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink } from 'apollo-client-preset';
import { from } from 'apollo-link';
import { onError } from 'apollo-link-error';
import apolloLogger from 'apollo-link-logger';
import Cookie from 'js-cookie';
import { endpoints } from '../config';

function tokenFromCookie(cookie) {
  ...
 return cookie;
}

export default class GraphqlClient {
  constructor(req) {
    const link = from([
      onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors) {
          graphQLErrors.map(({ message, locations, path }) =>
            console.warn('🤖[GraphQL error]:', {
              Message: message,
              Location: locations,
              Path: path,
            }),
          );
        }
        if (networkError) console.warn(`🤖[Network error]: ${networkError}`);
      }),
      ...(__DEV__ ? [apolloLogger] : []),
      new BatchHttpLink({ uri: `${endpoints.EX_API}/graphql` }),
    ]);

    const middlewareAuthLink = new ApolloLink((operation, forward) => {
      const token =
        !process.env.BROWSER && req.get('cookie')
          ? tokenFromCookie(req.get('cookie'))
          : Cookie.get('session');

      if (token) {
        operation.setContext({
          headers: {
            authorization: `Bearer ${token}`,
          },
        });
      }

      return forward(operation);
    });

    const httpLinkWithAuthToken = middlewareAuthLink.concat(link);

    return new ApolloClient({
      ssrMode: true,
      link: httpLinkWithAuthToken,
      cache: new InMemoryCache(),
    });
  }
}

Actual outcome:
but I'm getting the following error on my console:

ApolloError.js:34 Uncaught (in promise) Error: Network error: Error writing result to store for query:
 query CategoriesServicesQuery {
  categories {
    id
    name
    slug
    tags {
      id
      slug
      name
      __typename
    }
    __typename
  }
}

Cannot read property 'categories' of undefined
    at new ApolloError (ApolloError.js:34)
    at QueryManager.js:277
    at QueryManager.js:664
    at Array.forEach (<anonymous>)
    at QueryManager.js:663
    at Map.forEach (<anonymous>)
    at QueryManager.broadcastQueries (QueryManager.js:658)
    at QueryManager.js:226
    at <anonymous>

The request payload:

Seems like Apollo is batching the queries and returning the result as expected, see the response in the link bellow:
https://www.pastiebin.com/5a7d439215953

How to reproduce the issue:
My code was running fine before since I was just using:

...
import { HttpLink } from 'apollo-link-http';
...
new HttpLink({ uri: `${endpoints.EX_API}/graphql` }),

The bug started to happening after changing to new BatchHttpLink...

Summarizing my question: Is the GraphQL API in the backend that needs to handle with response data format or am I missing something on the frontend code?

Version

• [email protected]
• [email protected]

Thanks for your time and for your help!

Cheers,

Eder C.

[andfs]

any solution? I'm facing this error too

[psongpin]

same issue here. any hints how to fix this?

[andfs]

@psongpin The workaround that I found was pass the option: "fetchPolicy: 'no-cache'" in the query

[aboglioli]

I had the same error.

1003 is a possible solution. Don't forget to query the ids of nested entities.

[vicacid]

same issue, only when watchQuery.fetchPolicy - 'network-only'.

  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'network-only',
      errorPolicy: 'ignore',
    },
    query: {
      fetchPolicy: 'network-only',
      errorPolicy: 'all',
    },
    mutate: {
      errorPolicy: 'all'
    }
  }

[pennyandsean]

I have had this error after recent schema changes on the server where I needed to ensure my schemas built using merge-graphql-schemas were rebuilt. Hope this helps.

[v1siond]

Sometimes the issue for this is because the name of a query with params is in conflict with the name of a nested query that uses those params

query query($id: ID!){
    nestedQuery {
      id
      query(id: $id){ // this will be in conflict
        id
      }
    }
  }

query myQuery($id: ID!){ // Changing the requesting query name, will make this work
    nestedQuery {
      id
      query(id: $id){
        id
      }
    }
  }

[rosskevin]

It appears that multiple people have run into something similar based on missing id in their payloads - a very common problem.

Batching is not part of this repo (apollo-link), and cache management is part of the apollo-client repo. If you continue to have a problem, please check out slack, stack overflow, or file an issue in one the repo that you feel is most likely the source of the issue.

[merijnponzo]

exactly,
I added _id to breed an the error was gone

[kosiakMD]

Hey guys, have the same issue BUT
I receive IDs
BUT this error comes only on second and more queries:
1) Query_1 - ok, Query_2 - fails,... Query_n - fails
2) Query_1 - ok, Query_1 - fails, ... Query_1 - fails

We have random repeatable IDs!
Can it be caused because of the IDs from different queries and instances are the same sometimes?

[TimFoerster]

I open a discussion on spectrum:
https://spectrum.chat/?t=dd2d7bde-cd28-48d2-b2f7-3ef95b6b5827

[Aid19801]

Anyone know the logic behind having to request IDs for nested queries? Not an issue obviously but just interested to know

a) why it's necessary

b) why the error msg is "Error writing result to store for query" when it seemingly has nothing to do with writing a result to the store. Error should at least suggest "Did you forget to request id with your nested query?"

[capaj]

@Aid19801 it's needed for normalizing results into the cache. I actually wrote a bit about it here: https://github.com/apollographql/apollo-client/issues/2510#issuecomment-497869566

This works as intended, but why did @apollographql team fail to mention this in the docs that you need to be really meticulous when writing queries and take a very good care when you query id field and where you don't is minboggling.

So I attempted to update the docs for them: https://github.com/apollographql/apollo-client/pull/4895