apolloClient query returning old data after any mutation (w/ fetchPolicy: "network-only")

I’m doing SSR with apollo and nextjs. So I’m calling a SSR function when loading my page using a apolloClient.query() function, passing the data as props to the component in the page.

I have a useEffect hook which runs after I add a new post to the database (dgraph), via useMutation, and inside that hook I rerun the same apolloClient.query() to get the newest data and re-render it. However, for some reason, when I call the query the second time, it always shows old data not the new data with new post. I thought it was a caching issue, but even when I pass "fetchPolicy: “network-only” " per their docs, it still doesn’t seem to return the new data. I know the database is being updated b/c after I refresh the page, I see the new data. I’ve been stuck for a while, any help would be most appreciated!

Here’s relevant code:

component.js

export default function Questions({ questionsInit, client }) {
  const [questions, setQuestions] = useState({ ...questionsInit, status: "init"});
  const [questionsChanged, setQuestionsChanged] = useState(true);
  const [serverError, setServerError] = useState(null);
  const [showAdd, setShowAdd] = useState(false);

  useEffect(() => {
    async function getQuestions() {
      //this is the initial render, do not fetch code since it
      //is already set from the server side
      if (questionsChanged !== null) {
        try {
          const { data } = await client.query({query: GET_QUESTIONS_QUERY});
          setQuestions({ ...data, status: 'success'});
        } catch (err) {
          setServerError({ message: err.message});
          console.log(err.message);
        }
      }
    }
    getQuestions();
  }, [questionsChanged]);


  return (
      <>
        //component where questionsChanged is passed
      </>
  )
}

and my page/index.js where I’m initially calling the data via SSR:

export default function HomePage(props) {
  return (
    <>
    <Questions{...props} />
    </>
  );
}

export async function getServerSideProps(context) {
  const apolloClient = initializeApollo();
  const { origin } = getAbsoluteUrl(context.req);

  const questions = await apolloClient.query({query: GET_QUESTIONS_QUERY});
  const users = await apolloClient.query({query: GET_USERS_QUERY});

  // Here we are doing a query for the profile data.
  // that we will pass in the messageInit props
  return { props: { questionsInit: questions.data, userInit: users.data, origin } };
}

Hi! Would you mind sharing the component code with the useEffect hook? That would probably make it easier to see what’s going on.

edited my post to include code snippets! @mindnektar
also initial code (apollo-client.js and _app.js can be found in comments)

additional code snippets:

apollo-client.js

function createApolloClient() {
  return new ApolloClient({
    ssrMode: true,
    link: new HttpLink({
      uri: GRAPHQL_URL, 
    }),
    cache: new InMemoryCache(),
    defaultOptions: {
      query: {
        fetchPolicy: 'network-only',
        errorPolicy: 'all',
      }
    }
  });
}

export function initializeApollo(initialState = null) {
  const _apolloClient = apolloClient ?? createApolloClient();

  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
  // gets hydrated here
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract();
    // Restore the cache using the data passed from getStaticProps/getServerSideProps
    // combined with the existing cached data
    _apolloClient.cache.restore({ ...existingCache, ...initialState });
  }
  // For SSG and SSR always create a new Apollo Client
  if (typeof window === "undefined") return _apolloClient;
  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient;
  return _apolloClient;
};

export function useApollo(initialState) {
  const store = useMemo(() => initializeApollo(initialState), [initialState]);
  return store;
};

and pages/_app.js

import { ApolloProvider } from "@apollo/client";
import { useApollo } from "../util/apollo-client";

export default function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps.initialApolloState);

  return (
    <ApolloProvider client={apolloClient}>
      <div style={{ margin: "20px" }}>
        <Component client={apolloClient} {...pageProps} />
      </div>
    </ApolloProvider>
  );
}

Does questionsChanged actually ever get modified? Its default value is true, and the effect hook should only ever get called if the value changes. I assume you’ve verified that client.query will get called inside the effect hook?

It does get called after its changed. The issue is the query calls the old data not the new data.