deep-jade

Using hooks inside of loaders

Is it expected to not be able to use hooks inside of loaders?

8 Replies

stormy-gold•3y ago

You cannot call them 😏

deep-jadeOP•3y ago

Man this is causing so many issues 😦 Any idea how to get around it? At this point I just want to be able to set initial data in the loader via the global store actually nm I got it lovely library btw thank you I do have another question @Tanner Linsley if you dont mind:

  loader: async ({ params: { id }, context: { queryClient, api } }) => {
    await queryClient.ensureQueryData({
      queryKey: ["features", id],
      queryFn: () => api.get<Models.Feature>(`features/${id}`),
      initialData: useStore.getState().activeFeature,
    });

    return () =>
      useQuery({
        queryKey: ["feature", id],
        queryFn: () => api.get<Models.Feature>(`features/${id}`),
        initialData: useStore.getState().activeFeature,
        enabled: !!id,
      });
  },

  loader: async ({ params: { id }, context: { queryClient, api } }) => {
    await queryClient.ensureQueryData({
      queryKey: ["features", id],
      queryFn: () => api.get<Models.Feature>(`features/${id}`),
      initialData: useStore.getState().activeFeature,
    });

    return () =>
      useQuery({
        queryKey: ["feature", id],
        queryFn: () => api.get<Models.Feature>(`features/${id}`),
        initialData: useStore.getState().activeFeature,
        enabled: !!id,
      });
  },

Why ensureQueryData and the useQuery?

stormy-gold•3y ago

If the data is already there it will resolve immediately and query in the background.

deep-jadeOP•3y ago

Thanks

rare-sapphire•3y ago

sorry to hijack but I had the same question, if I can't use hooks how am I supposed to use the useLoader hook in the loader function of the route?

vicious-gold•3y ago

The trick is you shouldn't 😃 Here is my example of route loader with tanstack-loaders:

loader: async ({ context: { loaderClient }, preload, routeSearch: { after, before, pageSize, searchTerm } }) => {
        const loaderOptions = createLoaderOptions({
            key: "getPaginatedConnections",
            variables: {
                after,
                before,
                pageSize,
                searchTerm,
            },
        });

        await loaderClient.load({ ...loaderOptions, preload });

        return () => useLoaderInstance(loaderOptions);
    },

loader: async ({ context: { loaderClient }, preload, routeSearch: { after, before, pageSize, searchTerm } }) => {
        const loaderOptions = createLoaderOptions({
            key: "getPaginatedConnections",
            variables: {
                after,
                before,
                pageSize,
                searchTerm,
            },
        });

        await loaderClient.load({ ...loaderOptions, preload });

        return () => useLoaderInstance(loaderOptions);
    },

And then inside of a route you're using it like this

const { data } = connectionsRoute.useLoader()();

const { data } = connectionsRoute.useLoader()();

stormy-gold•3y ago

It's a form of currying You have all the variables you need to run the hook in loader, so it makes sense to formulate it there, then ship it down the line to be called later.

automatic-azure•2y ago

Hello, what solution did you use please ?

Gaming

Programming

Using hooks inside of loaders

Did you find this page helpful?