How best to use this router and react-query?

[geoff-harper]

Let's say I have the following Item route that renders some details and a list of Children

export const viewItemRoute = new Route({
  path: '/$id',
  component: ItemProfile,
  getParentRoute: () => itemRoute, // "/items"

  loader({params}) {
    return queryClient.ensureQueryData({
      queryKey: childKeys.list({itemId: params.id}), // ["child", "list", string]
      queryFn: () => getChildren({itemId: params.id}),
    }),
  },
});

and then I have the following in the ItemProfile

const children = useLoader({from: '/items/$id'});

When I go to /items/123 and check the query dev tools the query is marked as inactive. I guess this is because I'm not using the query hook itself. If I go and delete one of children, the /items/123 query is not refetched. I'm invalidating it with the following

export const useDeleteChild = (
  config?: MutationConfig<typeof deleteChild>
) => {
  return useMutation({
    ...config,
    mutationFn: deleteChild,
    onSuccess(data) {
      return Promise.all([
        queryClient.invalidateQueries(childKeys.lists()), // ["child", "list"]
      ]);
    },
  });
};

I'm pretty sure it isn't refetching on /items/123 because the query isn't considered active, but even setting stale time to 0 didn't resolve it. The following was working before switching to useLoader

const {data} = useChildren({itemId: params.id});
const children = data!

Using the non-null assertion is safe since the router guarantees it but it's kind of smelly. Is there a way to keep useLoader while correcting my refetching behaviour?

[geoff-harper]

After doing some more reading I guess I was overcomplicating it using ensureQueryData vs fetchQuery. I misinterpreted this part of TkDodo's blog. I've left cache time along and a stale time of 60s so I'll switch everything over to fetchQuery and call it a day