Related queries and merging results - how to handle this

[senser1]

I was wondering how to conceptually approach the following pattern with react-query:

• fetch data from multiple API endpoints (dependent queries and non-dependent queries, not really relevant in this case) and after with data is retrieved, transform / merge the data together and return it to the component.

Possible solutions I've come up with so far:

single hook that does data fetching and merging, returning the result:

export const useTodosWithUsers = () => {
  const todosQuery = useQuery("todos", fetchTodos);
  const usersQuery = useQuery("users", fetchUsers);

  let mergedTodosWithUsers = [];
  if (todosQuery.data && usersQuery.data) {
    // merge/transform -> push to mergedTodosWithUsers
  }

  return { todosQuery, usersQuery, mergedTodosWithUsers, loading: todosQuery.isLoading || usersQuery.isLoading
 };
};

Advantage; I get the benefit of todos and users both be cached, can do optimistic updates on the cache etc. Disadvantages; I have to do more work in the view components to see if the mergedTodosWithUsers is ready to be used and the individual loading indicators of the todosQuery and usersQuery do not make much sense.

Another solution would be to create an async function, fetch all required data + do the transformations/merging in that function, return the results via a promise and use that function inside a useQuery hook:

const fetchUsersWithTodos = async () => {
  try {
    const todosData = await fetchTodos();
    const usersData = await fetchUsers();

    return todosData.map((todo) => {
      const user = usersData.find((user) => user.id === todo.userId) || {};
      return { ...todo, user };
    });
  } catch (error) {
    return error;
  }
};

export const useTodosWithUsers = () => {
  return useQuery("todos-with-users", fetchUsersWithTodos);
};

This way I have the benefit of using result of useQuery for its state flags and can trust that isSuccess really means that the data is available in my components, I only miss the caching of individual users and todos.

A combination of the two approaches would be even better, but I could not figure out how to use a react-query inside an async function and await its response. If that would work, I could use useQuery calls for individiual data fetching, pass the queries to another hook that would call an async function in its own useQuery function.

Something like (which does not work of course):

const mergeTodosAndUsers = async (queries) => {
  const [users, todos] = queries;

  // somehow await on the users and todos queries here

  if (queries.every((query) => query.isSuccess)) {
    const { data: todosData } = todos;
    const { data: usersData } = users;

    const todosWithUsers = todosData.map((todo) => {
      const user = usersData.find((user) => user.id === todo.userId) || {};
      return { ...todo, user };
    });

    return todosWithUsers;
  }
};

export const useTodos = () => {
  const todosQuery = useQuery("todos", fetchTodos);
  const usersQuery = useQuery("users", fetchUsers);

  const mappedResult = useQuery("users-and-todos", () =>
    mergeTodosAndUsers([todosQuery, usersQuery])
  );

  return { todosQuery, usersQuery, mappedResult };
};

Any thoughts on the above would be very welcome!

[TkDodo]

All my thoughts on that topic, including pros and cons, are in my blog: https://tkdodo.eu/blog/react-query-data-transformations

[senser1]

@TkDodo ; thanks for your detailed blog, gave me some new insights. Most helpful. Can you elaborate a little bit on the question above regarding combining the result of multiple api calls that form the final response? Your blog posts seem to be only handling the transformation of the fetched todos.

Doing the transformation in the render method with multiple dependent queries is a bit harder if you have multiple queries.
How do you see this going to work?

[TkDodo]

I think it really depends on what you want to have in the queryCache and when / how often you want to make data transformations. You can of course make a queryFn, await two serial requests and return the combined data. The data will be cached together and you'll have no way of accessing only the data of the individual requests. If that is your use-case, then that's a good solution:

const useTodosAndUsers = () => useQuery(
  'todosAndUsers',
  async () => {
    const users = await fetchUsers()
    const todos = await fetchTodos()
    return mergeSomehow(users, todos)
  }
)

Immediate advantage includes only one loading/error state, only one data field, so a familiar interface for the consumers. Drawback is that both queries are tightly coupled, because there is just one query.

combining two queries that are also used in isolation is best done with dependent queries. I've never seen the approach that creates a 3rd query to be honest - I don't think it's necessary. The first solution that just takes both queries and combines the data and flags that you need sounds good to me.

[senser1]

Thanks. This definitely points me in the right direction!