Home > Software design >  How to repeatedly send request to a same API using react-query?
How to repeatedly send request to a same API using react-query?

Time:12-17

I want to use react-query to send the request and check a field of the response right after. Once I found the field I need in the response, stop doing more action. Otherwise, keep executing the request again until I find the field.

const queryResult = useQuery({ queryKey: ['test','testDataId'], queryFn: ({queryKey}) => fetchTestData(queryKey[1]),
});

CodePudding user response:

I found a clue that might be helpful: react-query QueryClient

const queryClient = useQueryClient();
const queryKey = ['test','testDataId'];

const queryResult = useQuery({ 
  queryKey,
  queryFn: ({queryKey}) => fetchTestData(queryKey[1]),
  // Adjust the `responseData` structure,can be omitted.
  select: (result) => result.data,
  onSuccess(responseData){
    if (responseData.refreshing === true) {
      // Crucial action, mark the query with queryKey as staled
      queryClient.invalidateQueries({queryKey})
    }
  }
});

CodePudding user response:

There is another way also you can try by adding retry params and also manage the delay through retryDelay:

ex.

const result = useQuery({
  queryKey,
  queryFn: ({queryKey}) => fetchTestData(queryKey[1]),
  retry: 10, // Will retry failed requests 10 times before displaying an error
})

You can also add a function in it for manage based on status

const result = useQuery({
  queryKey,
  queryFn: ({queryKey}) => fetchTestData(queryKey[1]),
  retry: (count, {message: status}) => (status !== '404' && status !== '401')
  // You can add logic based on your requirement and status code.
})

references link:

https://tanstack.com/query/v4/docs/guides/query-retries

React Query keeps retrying despite 'enabled' set to false

  • Related