Modifying state in react-query's query function

Question

I have written a wrapper around fetch that lets me handle error states from my API like a 401. When it gets an error, the custom fetch function sets some state using react hooks.

Because I use hooks in the function, I cannot just import it normally. Therefore, I pass this wrapped function around using context.

When I use react-query, I would like to just use this wrapped function in the following way:

function myQuery(key, apiFetch) {
  return apiFetch(...)
}

function MyComponent() {
  useQuery('key', myQuery)
}

In this example, apiFetch is an available argument in the query function.

One option I do have here is to just inline the function like so:

function myQuery(key, apiFetch) {
  return apiFetch(...)
}

function MyComponent() {
  const apiFetch = useApiFetch();
  useQuery('key', (key) => apiFetch(...))
}

However I find this a little messy and would like to keep the query/mutation functions separate if possible.

Does anyone know of an approach I can take to have my apiFetch function be available to me in react-query's functions?

NearHuscarl · Accepted Answer · 2021-10-24 05:12:40Z

2

If you don't want to repeat calling useApiFetch and useQuery hooks in multiple components, you can extract both hooks into another custom hook that integrates react-query with your fetch hook:

function useApiQuery(param) {
  const apiFetch = useApiFetch();
  return useQuery(['key', param], (key) => apiFetch(...))
}

Then use it in your component:

function MyComponent({ param }) {
  const { data, error } = useApiQuery(param);
  
  return (...);
}

edited Oct 24, 2021 at 5:12

answered Oct 24, 2021 at 5:06

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

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

1 Comment

rbhalla Over a year ago

Good idea! This is what I'll probably do if I can't find a way to inject the function directly. Will mark as answer if I can't find another way. Thanks for the response.

Collectives™ on Stack Overflow

Modifying state in react-query's query function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related