how to put useQuery in react-query in conditionally using typescript

Question

I am using useQuery from react-query to fetch data that I only want the query to run in some condition. How can I use it? following is my code to use useQuery

  const query = useQuery<APIResponse, Error>(
    [{query: creatGQL, variables: variables}],
    async () => {
      const result: APIResponse = await ucFetch(apiUrl, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          query: creatGQL,
          variables: variables,
        }),
      });
      return result;
    }  );
  return query;

The solution: stackoverflow.com/a/69760795/16983617 It worked for me. — Luis Murillo
– Luis Murillo, Commented Oct 28, 2021 at 20:57

TkDodo · Accepted Answer · 2021-06-25 09:42:51Z

8

A query can be disabled / enabled by using the enabled option. If it is false, the query will not run:

useQuery(key, queryFn, { enabled: myCondition }

the condition can be static, or driven by state / props - anything that's a boolean really.

answered Jun 25, 2021 at 9:42

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jacobcan118 Over a year ago

I though enabled parameter only to determine if query should run after first time component render..it doesn't apply the situation like once component already render but not the case that useState variable change after component render

TkDodo Over a year ago

no, that's not the case. enabled can enable or disable a query at will.

Collectives™ on Stack Overflow

how to put useQuery in react-query in conditionally using typescript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related