Add meta in each item returned by useQueries

[dgrcode]

I have a use case where I can definitely work with the current library –which is awesome! thanks 😄–, but I want to propose something that would make me feel more confident about the code I'm writing.

Maybe I'm missing some part of the library which would allow me to do what I want.

Example use case

I'm getting a bunch of records for different users with the following code:

const results = useQueries({
  queries: userIds.map(userId => ({
    queryKey: ['records', ':userId', userId],
    queryFn: () => getRecordsForUser(userId),
  })),
})

Here, userIds is just a list of user ids whose records I want to get.

Then I want to process the results to create a dictionary with the key being the userIds, and the values being the records for that user.

What I'm doing right now is the following:

const records = {}
userIds.forEach((userId, idx) => {
  records[userId] = results[idx].data
})

That works just fine, but I'm implicitly relying in the order of userIds and results being the same. I can't warranty that someone in the future will change the array (filtering, sorting, etc.) and accidentally break the dictionary.

In my particular use case, the records have a reference to the user id, so I could write a test that checks the records stored in the dictionary are actually records of the user represented by the key they're being stored in.

Proposal

I was hoping I could access the meta option on the result itself. That way I could do the following:

const results = useQueries({
  queries: userIds.map(userId => ({
    queryKey: ['records', ':userId', userId],
    queryFn: () => getRecordsForUser(userId),
    meta: { userId } // <-- new
  })),
})

const records = {}
results.forEach(result => {
  records[result.meta.userId] = results.data
})

Note how I'm now iterating on the results instead of the userId array. In fact, I no longer depend on the array, since the only relevant information is attached to the meta option.

I believe this proposal would allow for writing cleaner and easier to maintain code. I'd also be happy to make the changes if this proposal makes sense.

[TkDodo]

you can easily attach the userId to the result object in the queryFn, though I would expect the getRecordsForUser(userId) function to potentially contain the userId already. Then, you can use groupBy or something similar to group the results by that id. So generally, if you want something available on the result, add it to the data field, which is what the queryFn returns.

[dgrcode]

Adding the data to the queryFn would look something like the following, right?

const results = useQueries({
  queries: userIds.map(userId => ({
    queryKey: ['records', ':userId', userId],
    queryFn: () => ({
      userId,
      records: getRecordsForUser(userId)
    }),
  })),
})

const records = {}
results.forEach(result => {
  records[result.data.userId] = results.data.records
})

Yep, I hadn't thought about that, but it's definitely clean and maintainable. For some reason –maybe because I'm using TypeScript– I was attached to the idea that the result.data had to be of type Record[]. I didn't think about using an object there, but it makes total sense.

Thanks!

[dgrcode]

After working a bit on the implementation, there was something I didn't quite like from the snippet I wrote above. It was the fact that the key ['records', ':userId', userId] wasn't the array of records itself, but an object with {userId: string, records: UserRecords[]}.

I could live with it, but somehow it felt inconsistent that the cache and the database held different types of data for the same queries. I'm not sure if this makes total sense.

I ended up going a different route, which I think it's slightly better because:

• It's actually the component who takes the data from the cache and builds the object needed to represent that information.
• The cache (react query in this case), just needs to hold the right data, similar to what the database has. It just keeps the data normalised and doesn't care about what I need to represent in the component.

const records = {}
userIds.forEach(userId => {
  const userRecords =
    queryClient.getQueryData<RecordWithValues[]>([
      'records',
      ':userId',
      userId,
    ]) ?? []
  records[userId] = userRecords
})

[jbojcic1]

@TkDodo what if I'd want to store the entire result of a single query in the map under the user id? Is there any way I could do that because data might not be there if there is error for example? E.g. in the combine method I'd like to return Map<string, UseQueryResult<MyData, Error>> where key is the userId