“Found @client directives in query but no client resolvers were specified” Warning when using client cache

Question

I've been following the Apollo Client docs on local state.

I've implemented a very simple query of the client cache:

export const GET_USER_ACCOUNTS = gql`
    query GetUserAccounts {
        userAccounts @client
        name @client
    }
`;

userAccounts and name are both stored in my cache following authentication:

    <Mutation
          mutation={API_TOKEN_AUTHENTICATION}
          variables={{ apiKey }}
          onCompleted={({
              apiTokenAuthentication: {
                  token,
                  userAccounts,
                  user: { givenName, familyName },
               },
          }) => {
             localStorage.setItem('token', token);
             client.writeData({
                 data: {
                     isLoggedIn: true,
                     userAccounts,
                     name: `${givenName} ${familyName}`,
                 },
             });
         }}
    >

and I've warmed the cache with default values:

import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';

const cache = new InMemoryCache();
const link = new HttpLink({
    uri: 'http://localhost:8002/v1/graphql',
    headers: {
        Authorization: `${localStorage.getItem('token')}`,
    },
});
const client = new ApolloClient({
    cache,
    link,
});
// set up the initial state
cache.writeData({
    data: {
        name: '',
        userAccounts: [],
        isLoggedIn: !!localStorage.getItem('token'),
    },
});

export default client;

I've not included any local resolvers, since the docs state:

When Apollo Client executes this query and tries to find a result for the isInCart field, it runs through the following steps:

Has a resolver function been set (either through the ApolloClient constructor resolvers parameter or Apollo Client's setResolvers / addResolvers methods) that is associated with the field name isInCart? If yes, run and return the result from the resolver function.

If a matching resolver function can't be found, check the Apollo Client cache to see if a isInCart value can be found directly. If so, return that value.

However, despite the code working fine (it fetches the values I want no problem) I still get this warning:

Found @client directives in query but no client resolvers were specified. You can now pass apollo-link-state resolvers to the ApolloClient constructor.

Have I misunderstood? Should I be including a client resolver for this in some way?

Any advice appreciated

Daniel Rearden Daniel Rearden · Accepted Answer · 2019-05-03T13:33:53

From the docs:

⚠️ If you want to use Apollo Client's @client support to query the cache without using local resolvers, you must pass an empty object into the ApolloClient constructor resolvers option. Without this Apollo Client will not enable its integrated @client support, which means your @client based queries will be passed to the Apollo Client link chain. You can find more details about why this is necessary here.

In other words, just add an empty resolvers object to your configuration like this:

const client = new ApolloClient({
    cache,
    link,
    resolvers: {},
});

“Found @client directives in query but no client resolvers were specified” Warning when using client cache

2 Answers