secure-lavender

useQuery to get data in nested route

I've been using useQuery without a queryFn but say query key to get the data and status information about the query in a components outside where I supply the queryFn [I thought this was supported behavior, let me know if it isn't]. If I have a path like reports/$reportId I have the useQuery with the queryFn at the "reports" level, but then useQuery without queryFn at the "$reportId" level. When I navigate from /reports to /reports/$reportId this all works fine, but if I go directly to /reports/$reportId the queryFn is never called. If I avoid rendering the outlet in /reports until after the query is finished it does work. Is this expect? Is there a way to do this without the conditional rendering of the outlet? Is there another setup that is more correct?

6 Replies

rival-black•10mo ago

Maybe show some code, specifically your 'useQuery'.

stormy-gold•10mo ago

I think if you are just using queryKey, unless it's also got a default query function set it won't know what function to call if you don't supply it to useQuery I understand your using tanstack router so I'd go with bundling the query and key with queryOptions and preceeding the cache with prefetchQuery or ensureQueryData

secure-lavenderOP•10mo ago

in /reports:

const { isSuccess, data } = useQuery({
  queryKey: [ALL_REPORTS],
  queryFn: () => getAllReports()
})

const { isSuccess, data } = useQuery({
  queryKey: [ALL_REPORTS],
  queryFn: () => getAllReports()
})

and in /reports/$reportId:

const { isSuccess, data } = useQuery<Report[]>({ queryKey: [ALL_REPORTS] });

const { isSuccess, data } = useQuery<Report[]>({ queryKey: [ALL_REPORTS] });

since /reports renders first, it should have a queryFn associated with the key I'm just using useQuery wrong

stormy-gold•10mo ago

Yeah just define the options object outside the component

stormy-gold•10mo ago

https://tkdodo.eu/blog/the-query-options-api has more examples

The Query Options API

v5 brought a new, powerful API, especially if you're using React Query with TypeScript...

ambitious-aqua•10mo ago

Hi I want to know how to handle caching. For instance, when I go back to the kanban page from the lead details page, the kanban page should not reload. Here are the custom hooks to fetch data.

const fetchProperties = async (
  statusesID: number,
  siteIds: number[],
  managerIds: number[],
  sortValue: string
) => {
  const response = await fetch(

${BASE_URL}/properties/search

, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization:

Bearer ${OAUTH_TOKEN}

,
      "Accept-Language": "English",
    },
    body: JSON.stringify({
      PageIndex: 1,
      PageSize: 20,
      OrderBy: sortValue,
      Condition: {
        SiteIds: siteIds,
        PurposeIds: [],
        StatusIds: [statusesID],
        ConstructionTypes: [],
        Reference_AdvanceSearch: false,
        IsUseGeoCity: false,
        TypeOfPropIds: [],
        InteriorDecorIds: [],
        EnviromentIds: [],
        ExteriorStateIds: [],
        UsageIds: [],
        ManagerIds: managerIds,
        FilterObject: false,
        DemandUseGps: false,
        RegionEntries: [],
        InputEntries: [],
        IsMediaSelected: false,
        Ids: [],
        IsDeleted: false,
      },
      Fields: "",
      ViewMode: 0,
      Cache: true,
      FilterCondition: {
        Fields: [],
      },
    }),
  });

  if (!response.ok) {
    throw new Error("Network response was not ok");
  }

  return response.json();
};

export const useFetchProperties = (
  statusesID: number,
  siteIds: number[],
  managerIds: number[],
  sortValue: string
) => {
  return useQuery({
    queryKey: ["properties"],
    queryFn: () => fetchProperties(statusesID, siteIds, managerIds, sortValue),
  });
};

And the kanbanboard component is here.

export default function Board({ statusesID }: BoardProps) {
....
const { data, error, isLoading, refetch } = useFetchProperties(
    statusesID,
    selectedSiteIds,
    selectedManagerIds,
    selectedSort
  );

How to handle caching in there?

Gaming

Programming

useQuery to get data in nested route

Did you find this page helpful?