We have a communication between two services, an API and a client. The client is using NextJS and does partially SSR. the API is using a graphql module.
To authenticate we forward cookies from the client. We do this by passing the credentials: 'include' to a fetch query.
This works for 85% of the cases, however for 15% it doesn't. This only happens on the part where we send graphql requests from the client! (so after SSR)
This is the fetch configuration we're using (using apollo).
import { ApolloClient } from 'apollo-client';
let globalApolloClient: ApolloClient<{}> | null = null;
function initApolloClient(
initialState: {} = {},
cookie?: string,
): ApolloClient<{}> {
if (typeof window === 'undefined') {
return createApolloClient(initialState, cookie);
}
if (!globalApolloClient) {
globalApolloClient = createApolloClient(initialState);
}
return globalApolloClient;
}
import fetch from 'isomorphic-unfetch';
function createApolloClient(
initialState = {},
cookie?: string,
): ApolloClient<{}> {
const headers = cookie ? { cookie } : undefined;
const httpLink = new HttpLink({
credentials: 'include',
fetch,
headers,
uri: OurApiUrl,
});
return new ApolloClient({
cache: new InMemoryCache().restore(initialState),
link: ApolloLink.from([httpLink]),
ssrMode: typeof window === 'undefined',
});
}
The GraphQL context can not be created as our authentication cookie is missing in 15% of the cases. What could be the reason of this?