Skip to content

Commit

Permalink
Fix Apollo dev tools extension
Browse files Browse the repository at this point in the history
Was happening because next.js renders our app (ui/_app.tsx) twice,
and the cache is initialized during that process.
This seems to be because of next.js rewrites, and is normal behavior:
vercel/next.js#33028 (comment)

However, the Apollo dev tools extension doesn't work properly (shows nothing)
when multiple apollo clients are created. See:
apollographql/apollo-client-devtools#822 (comment)
  • Loading branch information
Leitsi committed May 19, 2023
1 parent 33be999 commit d68ad6d
Showing 1 changed file with 7 additions and 1 deletion.
8 changes: 7 additions & 1 deletion ui/src/graphql/ApolloProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import { ApolloProvider as Provider } from '@apollo/client';
import { FC } from 'react';
import { createGraphqlClient } from './client';

let graphqlClient: ReturnType<typeof createGraphqlClient> | null = null;

export const ApolloProvider: FC = ({ children }) => {
const graphqlClient = createGraphqlClient();
// Initialize client only once, so we get only one cache instance.
if (!graphqlClient) {
graphqlClient = createGraphqlClient();
}

return <Provider client={graphqlClient}>{children}</Provider>;
};

0 comments on commit d68ad6d

Please sign in to comment.