Multiple query cache from one HTTP request

[TomPradat]

Here is my use case :

I have an application which on init fetch todos and people in one HTTP request

I initially used selectors to select the todos and the people but then I have this problem that when updating the todos cache manually, the people reference gets updated too and cause some hooks that depend on people to re-run.

Is there a recommended way to solve this ? What would make more sense from my point of view is to be able to have two caches todos and people that would be bound to the same HTTP request, but I didn't find a way to do this.

[TkDodo]

I see nothing wrong with this approach:

const useInit = (select) => {
  queryKey: ['init'],
  queryFn: fetchTodosAndPeople
}

export const usePeople = useInit(data => data.people)
export const useTodos = useInit(data => data.todos)

I have this problem that when updating the todos cache manually, the people reference gets updated too and cause some hooks that depend on people to re-run.

Even if you update people, components that are subscribed to useTodos should not re-render because they are only interested in data.todos. That's what select does.

[TomPradat]

My bad, I should have tried on a repro. Updating the todos' cache does not affect the people's cache as you said. Here is a minimal example (in case it helps anyone): https://codesandbox.io/s/prod-leaf-qgtfv6?file=/src/App.js