When using React Query how do I make sure data is normalized across queries of a dataset?

user_420787 0
Viewed 2426

I'm writing an sort of project management app that'll have a large number of "tasks" with a lot of properties within them that'll be rendered throughout the app. I am looking at using React Query to prefetch, cache locally, and update this data from the server.

One key architectural thing I want to get right is that when I query or mutate Tasks[123] that I affect a single underlying object in the state and not get stuck with duplicate data everywhere. On first glance React Query seems to be perfect for this job if the Query Keys are setup right. However in their examples they don't seem to do this (or I'm failing to understand).

In their Basic Example they fetch some Posts on start and query using queryClient.getQueryData(["post", post.id]). As far as I can tell this is causing the data to be duplicated if I look at the provided ReactQueryDevtools window in the example.

Am I correct in thinking the example should be rewritten to use something like queryClient.getQueryData(["posts", {id: post.id} ])?

react-query reactjs
1 Answers

That is indeed the way I am setting up my query keys, so that I can do: queryClient.invalidateQueries(['posts']) and it invalidates all of them. But sometimes, you need more fine granular control. If that's the case, I'd do:

["posts", "list", { filter: "all" }]
["posts", "list", { filter: "published" }]
["posts", "detail", 1]
["posts", "detail", 2]

that way, I can still tackle everything with ["posts"], all lists with ["posts", "list"], all details with ["posts", "detail"] and a specific detail with ["posts", "detail", id] etc.

It is also good practice to have a queryKeyFactory to create those keys, something like:

const postKeys = {
  prefix: "posts",
  lists: [postKeys.prefix, "list"],
  list: (filter) => [...postKeys.lists, { filter }],
  details: [postKeys.prefix, "detail"],
  detail: (id) => [...postKeys.details, id]
}

Of course, I'm talking about "at scale" here. None of this is really needed for a todo app :)

user_84053100
Related