I'm facing a challenge where only server-side requests are being transmitted by the Apollo Client. As far as I know, there should be a client created during initialization in the _app file for non-SSR requests, and another when an SSR request is required. To address this issue, I have implemented the following code:
export function createApolloClient(ssrMode = typeof window === 'undefined') {
return new ApolloClient({
ssrMode,
uri: process.env.API_ENDPOINT,
cache: new InMemoryCache(),
});
}
export function useApollo() {
return useMemo(() => createApolloClient(false), []);
}
Inside my _app.tsx:
function MyApp({ Component, pageProps }: AppProps) {
const client = useApollo();
// ...
return (
<ApolloProvider client={client}>
<Provider store={store}>
<Modal />
<Toast />
<Component {...pageProps} />
</Provider>
</ApolloProvider>
);
}
Everything works smoothly for server-side requests and I can fetch the data successfully. However, I encounter an issue with non-SSR requests, like the one below, where no response is received and no request is being sent as verified through Dev Tools.
const [signUp, { loading }] = useMutation(SIGNUP);
const handleSubmit = () => {
signUp({
variables: {
payload: {
...state.inputs,
},
},
})
.then((res)=>console.log(res),
(err)=>console.error(err));
}
In this scenario, only undefined is logged. Even using the async/await syntax does not alter the outcome, as it appears that the log is not being reached.