useSuspenseQuery with skipToken still issues network request

[andreimatei]

Issue Description

I'm unconditionally using skipToken and yet this useSuspenseQuery call produces a network request for the respective query.

import {skipToken, useSuspenseQuery} from "@apollo/client";
...
const {data} = useSuspenseQuery(GET_SNAPSHOT_SPEC, skipToken);

Am I misunderstanding that skipToken is supposed to not generate a request? Or what could be the matter?

Link to Reproduction

N/A

Reproduction Steps

No response

@apollo/client version

3.9.10

[phryneas]

Using skipToken in that manner will immediately put the query into fetchPolicy: "standby", which should never issue a network request.

This is highly curious. Could you provide us with a reproduction showing that happening?

[andreimatei]

I have figured out that the problem has to do with <React.StrictMode> somehow (StrictMode causes render functions to be called twice, among other things). Without StrictMode, the skipping works as intended. Under StrictMode, both skipToken and {skip: true} seem to not result in skipping.

The repro seems to be as simple as:

const client = new ApolloClient({
  uri: "/graphql",
  connectToDevTools: true,
  cache: new InMemoryCache(),
});

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <DummyComponent />
    </ApolloProvider>
  </React.StrictMode>,
);

export const DummyComponent: React.FunctionComponent<
  PropsWithChildren<unknown>
> = ({children}) => {
  console.log("!!! DummyComponent render");
  let data: GetSpecQuery;
  const {data: res} = useQuery(GET_BINARIES, skipToken);
  console.log("!!! DummyComponent. data: ", res);

  return <>DummyComponent</>;
};

FWIW, useQuery with {skip: true} works fine (including under StrictMode).

Please tell me if this doesn't repro and I'll work on packaging it somehow.

[alessbell]

@andreimatei out of curiosity, is this reproducible using version 3.9.9? Also in the code snippet above, I'm assuming you meant {skip: true} instead of skipToken as being passed to useQuery? As useQuery does not accept skipToken.

[andreimatei]

out of curiosity, is this reproducible using version 3.9.9?

No, it does not seem to reproduce on 3.9.9! So the issue seems to have been introduced in 3.9.10. Going back and forth between these two versions reliably introduces and removes the problem.

Also in the code snippet above, I'm assuming you meant {skip: true} instead of skipToken as being passed to useQuery? As useQuery does not accept skipToken.

Sorry, the snippet was supposed to use useSuspenseQuery. It was supposed to be

export const DummyComponent: React.FunctionComponent<
  PropsWithChildren<unknown>
> = ({children}) => {
  console.log("!!! DummyComponent render");
  let data: GetSpecQuery;
  const {data: res} = useSuspenseQuery(GET_BINARIES, skipToken);
  console.log("!!! DummyComponent. data: ", res);

  return <>DummyComponent</>;
};

useQuery works fine.

[alessbell]

Thanks for confirming that, @andreimatei! I believe @jerelmiller has some thoughts here on how to reconcile the fix we shipped in 3.9.10 with the issue you're seeing. We're also working on releasing 3.10 this week, so I can't give a precise timeline on the fix here, but we're looking into it. Thanks!

[jerelmiller]

167 useSuspenseQuery tests and this wasn't one of them 😂. Thanks for reporting!

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.