Apollo link state only works when redundant query is defined? - apollo

Question

I have Apollo link state working:
import React from 'react';
import ReactDOM from 'react-dom';
import { HttpLink, InMemoryCache, ApolloClient } from 'apollo-client-preset';
import { WebSocketLink } from 'apollo-link-ws';
import { ApolloLink, split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { AUTH_TOKEN } from './constant';
import RootContainer from './components/RootContainer';
import { ApolloProvider } from 'react-apollo';
import { withClientState } from 'apollo-link-state';
import { gql } from 'apollo-boost';
const httpLink = new HttpLink({ uri: 'http://localhost:4000' });
const middlewareLink = new ApolloLink((operation, forward) => {
const tokenValue = localStorage.getItem(AUTH_TOKEN);
operation.setContext({
headers: {
Authorization: tokenValue ? `Bearer ${tokenValue}` : '',
},
});
return forward(operation);
});
const httpLinkAuth = middlewareLink.concat(httpLink);
const wsLink = new WebSocketLink({
uri: `ws://localhost:4000`,
options: {
reconnect: true,
connectionParams: {
Authorization: `Bearer ${localStorage.getItem(AUTH_TOKEN)}`,
},
},
});
const link = split(
({ query }) => {
const { kind, operation } = getMainDefinition(query);
return kind === 'OperationDefinition' && operation === 'subscription';
},
wsLink,
httpLinkAuth,
);
const cache = new InMemoryCache();
const stateLink = withClientState({
cache,
defaults: {
groupMenuStatus: {
__typename: 'GroupMenuStatus',
isOpen: false,
},
},
resolvers: {
Mutation: {
updateGroupMenuStatus: (_, { isOpen }, { cache }) => {
const data = {
groupMenuStatus: {
__typename: 'GroupMenuStatus',
isOpen,
},
};
cache.writeData({ data });
return null;
},
},
Query: {
groupMenuStatus: async (_, args, { cache }) => {
const query = gql`
query groupMenuStatus {
groupMenuStatus #client {
isOpen
}
}
`;
const res = cache.readQuery({ query });
return res.groupMenuStatus;
},
},
},
});
const client = new ApolloClient({
link: ApolloLink.from([stateLink, link]),
cache,
connectToDevTools: true,
});
const token = localStorage.getItem(AUTH_TOKEN);
ReactDOM.render(
<ApolloProvider client={client}>
<RootContainer token={token} />
</ApolloProvider>,
document.getElementById('root'),
);
However is most of the examples online they havn't needed to define a query resolver. If I remove the code below then the query from the front-end will always return the default state, the mutation seems to have no effect:
Query: {
groupMenuStatus: async (_, args, { cache }) => {
const query = gql`
query groupMenuStatus {
groupMenuStatus #client {
isOpen
}
}
`;
const res = cache.readQuery({ query });
return res.groupMenuStatus;
},
},

Answer 1

According to the official docs on https://www.apollographql.com/docs/link/links/state.html
Query resolvers are only called on a cache miss. Since the first time you call the query will be a cache miss, you should return any default state from your resolver function.
So, if you define a default, your query resolver will never be called. (You got the definition right, it is called Query indeed)
If you do not declare a default, you might use the query resolver to write something on cache (and then the query resolver will not be called anymore), or you can just return some value, and the resolver will be called every time.
I use it, for example to get user geolocation on the first call, that's my default value now, and the resolver is never called again.
Check my use case:
Query: {
async smePosition(_: any, {}: any, { cache }: IContext): Bluebird<any> {
return new Bluebird((resolve: any, reject: any): void => {
window.navigator.geolocation.getCurrentPosition(
({coords: {latitude: lat, longitude: lng}}) => {
const data = {
smePosition: {
__typename: 'SMe',
position: {lat, lng , __typename: 'IPosition'},
},
}
cache.writeData({ data })
resolve()
},
)
})
},
},
In this case, I don't define a defaults value for 'smePosition'