T
TanStack•3y ago
plain-purple

Return multiple queries on react router loader

Hi, how can i handle multiple queries inside the react router loader ? Is this the correct method with the array ? 
const myQuery1 = (id) => ({ 
  queryKey: ... ,
  queryFn: ... , 
})
const myQuery2 = () => ({ 
  queryKey: ... ,
  queryFn: ... , 
})

export const loader =
  (queryClient) =>
  async ({ params }) => {
    const query1 = myQuery1(params.contactId);
    const query2 = myQuery2();
    return (
      [
        queryClient.getQueryData(query1.queryKey) ??
        (await queryClient.fetchQuery(query1)),

        queryClient.getQueryData(query2.queryKey) ??
        (await queryClient.fetchQuery(query2))
      ]
    );
  };
const myQuery1 = (id) => ({ 
  queryKey: ... ,
  queryFn: ... , 
})
const myQuery2 = () => ({ 
  queryKey: ... ,
  queryFn: ... , 
})

export const loader =
  (queryClient) =>
  async ({ params }) => {
    const query1 = myQuery1(params.contactId);
    const query2 = myQuery2();
    return (
      [
        queryClient.getQueryData(query1.queryKey) ??
        (await queryClient.fetchQuery(query1)),

        queryClient.getQueryData(query2.queryKey) ??
        (await queryClient.fetchQuery(query2))
      ]
    );
  };
1 Reply
ratty-blush
ratty-blush•3y ago
You can return an object with 2 fields, query1 and query2?

Did you find this page helpful?