CODEWITHSUNDEEP
javascripttypescriptgraphqlnext.jsapollo-client
Shayan Shojaei
Shayan Shojaei

Reputation: 157

Apollo Client + Next.js not sending non-SSR requests

I'm having an issue where only the requests that are made on the server side are being sent through by Apollo Client. To my understanding, there needs to be a client made on initialization in the _app file for non-SSR requests, and another whenever there's an SSR request needed. So I'm using the code below to create those:

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), []);
}

and In my _app.tsx:

function MyApp({ Component, pageProps }: AppProps) {
  const client = useApollo();
  // ...
  return (
    <ApolloProvider client={client}>
      <Provider store={store}>
        <Modal />
        <Toast />
        <Component {...pageProps} />
      </Provider>
    </ApolloProvider>
  );
}

and this is all fine for server-side requests and I can retrieve the results. The problem is with non-SSR requests such as the one below where I get no response and in fact no request is being sent when I check using Dev Tools.

const [signUp, { loading }] = useMutation(SIGNUP);
const handleSubmit = () => {
   signUp({
        variables: {
          payload: {
            ...state.inputs,
          },
        },
      })
      .then((res)=>console.log(res),
            (err)=>console.error(err));
}

All I get in this case is, undefined getting logged. Doing the same thing using async/await syntax doesn't change much either and in fact it doesn't seem to reach the log.

Upvotes: 0

Views: 667

Answers (1)

Shayan Shojaei
Shayan Shojaei

Reputation: 157

The problem was with using process.env.API_ENDPOINT for creating the apollo client; as there's no access to the environment variables on client-side.

Upvotes: 2

Related Questions