502 Bad Gateway Error when Switching Pages in Next.js with Apollo Client Setup

Question

I'm encountering a 502 Bad Gateway error when switching between pages in my Next.js application that uses Apollo Client. Here’s a brief overview of my setup:

import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client";
import { getMainDefinition } from "@apollo/client/utilities";

import { removeLastTrailingSlash } from "lib/util";
import getConfig from "next/config";

let client;

/**
 * getApolloClient
 */
export function getApolloClient() {
  if (!client) {
    client = _createApolloClient();
  }
  return client;
}

/**
 * _createApolloClient
 */
export function _createApolloClient() {
  const { publicRuntimeConfig } = getConfig();
  const { Directus } = publicRuntimeConfig;

  // Main GraphQL endpoint
  const directusLink = new HttpLink({
    uri: removeLastTrailingSlash(Directus.url),
  });

  // Split links based on operation name or type
  const splitLink = split(({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "query" &&
      definition.name?.value.startsWith("Directus")
    );
  }, directusLink);

  return new ApolloClient({
    link: splitLink,
    cache: new InMemoryCache(),
    defaultOptions: {
      watchQuery: {
        fetchPolicy: "no-cache",
        errorPolicy: "ignore",
      },
      query: {
        fetchPolicy: "no-cache",
        errorPolicy: "all",
      },
    },
  });
}

Issue:

• Whenever I switch to another page in my staging environment, I receive a 502 Bad Gateway error.

• This issue doesn't occur in my local environment.

Additional Information:

• I’m using Next.js v14.2.7.

• The Directus.url endpoint is valid and accessible from my staging environment.

What I've Tried:

• Ensuring that the Directus.url is correct and reachable.

• Checking server logs for more details on the error.

• Testing the GraphQL endpoint directly using Postman.

Question:

What could be causing the 502 Bad Gateway error when switching pages, and how can I troubleshoot or resolve this issue in my Apollo Client setup?