Allowing prefetch outside of component but still client-side? #3148
Replies: 3 comments 1 reply
-
I am having similar issues trying to use tRPC with React Router 6.4. When using React Router together with React Query it is recommended to call the query client's methods directly inside loaders and actions (https://reactrouter.com/en/main/guides/data-libs). However, tRPC only exposes these methods via the |
Beta Was this translation helpful? Give feedback.
-
If you're doing an SPA, you can just create a global tRPC object & query client Dummy-code (not tested): Based on https://trpc.io/docs/react import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { trpc } from './utils/trpc';
export const queryClient = new QueryClient();
export const trpcClient = new trpc.createClient({
links: [
httpBatchLink({
url: 'http://localhost:5000/trpc',
// optional
headers() {
return {
authorization: getAuthCookie(),
};
},
}),
],
});
let trpcUtils: ReturnType<typeof trpc['useContext']> | null = null;
export function getTRPCUtils() {
if (!trpcUtils) {
throw new Error("Something went wrong")
}
return null;
}
function GlobalUtils() {
const context = trpc.useContext();
trpcUtils = context;
return null;
}
export function App() {
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
<GlobalUtils />
{/* Your app here */}
</QueryClientProvider>
</trpc.Provider>
);
} |
Beta Was this translation helpful? Give feedback.
-
@jamesopstad @bte234 There's an example in this blog post. I think this could be combined with Edit: So I've got the logic down up until getting the already fetched data.
Problem is I don't know how to start pre fetching the TRPC query. |
Beta Was this translation helpful? Give feedback.
-
I was trying out the new tanstack router and trying to integrate it with tRPC. This works fine, but I also want to use the loader function of tanstack router to prefetch the data to prevent some waterfall, and trpc currently only expose the
prefetch()
function through theuseContext()
hook, which cannot be called in the loader function since it's not a react component. There's alsocreateProxySSGHelpers()
, but loader is also not on the server either, so that's not usable for this use case either.The with-trpc-react-query example on tanstack router's repo just basically ignored trpc completely in the loader functions and define their own fetchData() function for the prefetching, which is definitely not great:
I tried to avoid having to define a fetch function again by creating a vanilla client and use the query function there instead:
This is better in that I don't have to define the fetch function again, but having to call queryClient manually and figuring out the keys that I want to set is still not ideal I think. If possible, I think something like this is probably better:
Thank you so much!
Beta Was this translation helpful? Give feedback.
All reactions