queryClient.ensureQueryData with multiple queries ?

[salicius]

Hi, how can i handle queryClient.ensureQueryData with multiple queries ?

[samhirtarif]

I am not entirely sure what you want to do here, perhaps more explanation with a code example would help.

But from what I understand from your question you might be able to use queryClient.getQueriesData

[salicius]

I am not entirely sure what you want to do here, perhaps more explanation with a code example would help.

But from what I understand from your question you might be able to use queryClient.getQueriesData

example:

export const loader = (queryClient) => async () => {
  const myData1 = await queryClient.ensureQueryData(getMyDataQuery1());
  const myData2 = await queryClient.ensureQueryData(getMyDataQuery2());

  return {myData1, myData2};
};

is it possible to get getMyDataQuery1 and getMyDataQuery2 in one ensureQueryData() ?

[samhirtarif]

After scouring the docs, to my knowledge, queryClient has no method out-of-the-box that supports what you are trying to acheive. But, you still might be able to achieve calling both ensureQueryData simultaneously with something like this

export const loader = (queryClient) => async () => {

  const promise1 = queryClient.ensureQueryData({ "key1",  getMyDataQuery1 });
  const promise2 = queryClient.ensureQueryData({ "key2",  getMyDataQuery2 });
  const [myData1, myData2] = await Promise.all([promise1, promise2])

  return {myData1, myData2};
};

[TkDodo]

this is a good way because it kicks off in parallel and then awaits

[salicius]

Ok, thank you all. I used:

export const loader = (queryClient) => async () => {

  const promise1 = queryClient.ensureQueryData(getMyDataQuery1());
  const promise2 = queryClient.ensureQueryData(getMyDataQuery2());
  const [myData1, myData2] = await Promise.all([promise1, promise2])

  return {myData1, myData2};
};

cause i declared my queries (with querykey and queryfn) outside the component