T
TanStack•13mo ago
equal-jade

How to Fetch, Update, and Share Data Across Components with useQuery?

Hi everyone, I’m working on a project where I need to fetch data using useQuery and then update this data with some complex operations while using it across multiple components. I’m a bit unsure about the best practices for handling this situation. Here’s a summary of what I’m trying to achieve: • Fetching Data: I’m using useQuery to fetch some initial data from an API. • Updating Data: Once the data is fetched, I need to perform some complex updates (like adding new properties, updating properties, swapping indexes, sort, filtering, or transforming the data) while it can be used in other components. • Sharing Updated Data: I want to share this data across multiple components in my application. My Questions: • What’s the best way to handle these complex updates? Should I update the data directly within the useQuery's cache, or is there a better approach? • Should I be using a context provider to distribute the updated data, or is there a more React Query-friendly approach for this? • Should i use a state manager to pass the initial fetched data and start updating the state? Any examples or best practices would be greatly appreciated! Thanks in advance for your help.
1 Reply
sunny-green
sunny-green•13mo ago
Hey there! Sorry to continue just sending you links but this article really helps a lot with that: https://tkdodo.eu/blog/react-query-data-transformations. In general, it sounds like that you should create a custom hook which returns useQuery within it. Take a look at the following example from the article. You can set up a selector which can be passed into the custom hook and then manipulate the data from react query to fit your needs without need to set up multiple useQuery calls with the same underlying function: 
export const useTodosQuery = (select) =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select,
  })

export const useTodosCount = () =>
  useTodosQuery((data) => data.length)
export const useTodo = (id) =>
  useTodosQuery((data) => data.find((todo) => todo.id === id))
export const useTodosQuery = (select) =>
  useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select,
  })

export const useTodosCount = () =>
  useTodosQuery((data) => data.length)
export const useTodo = (id) =>
  useTodosQuery((data) => data.find((todo) => todo.id === id))

Did you find this page helpful?