question: How to do conditional useQuery?

Hi, any idea, how to “elegantly” solve this one?

  const { deckId } = useMyContext(); // <- this can be null during refreshing page
  if (!deckId) return null;
  const { props } = useQuery<cardsQuery>(query, { deckId }, {});

I’m obviously using conditions with hooks which will and up with the error: React Hook "useQuery" is called conditionally. React Hooks must be called in the exact same order in every component render.

The only way to go here is to create one more wrapping component, which will conditionally render this component. But then useQuery looks like I need even more complicated code then with QueryRenderer

What came into my mind as a solution is adding option supressQuery?: boolean which will allow me conditionally “turn off” the query.

[melounek]

Thanks for the answer.

And there is one approach I will be using for now.

const { deckId } = useMyContext();
const { props } = useQuery<cardsQuery>(
    query,
    { deckId: String(deckId) },
    { fetchPolicy: !deckId ? "store-only" : "store-or-network" }
  );

The store-only will prevent sending the query to server at least and it will always return null which is exactly what I need.

So for me that’s solved and feel free to reopen this issue if needed.

[morrys]

I have just released version 3.2.0 https://github.com/relay-tools/relay-hooks/releases/tag/v3.2.0

Feel free to open new issues if you find problems 😃 Thanks @stramel @melounek @roman-khasimyanov