T
tRPC

How to prefetch data on the client into the cache?

How to prefetch data on the client into the cache?

TTom6/26/2023
To simplify a bit, lets say I'm making an app that allows users to view a project. I have a top level UI route with a summary of the project and then sub-routes that display more details, some of which require more fetches. Is there a way that I can make it so that when the top-level route loads, the trpc cache automatically prefetches the data needed for the sub-routes? Whenever I search the site for 'prefetch', I find the SSR stuff, but I'm actually trying to prefetch on the client. Thanks.
Sschlabach6/26/2023
I'm dealing with the same issue (https://discord.com/channels/867764511159091230/1121910827335831674). According to the docs, you should be able to use trpc.useContext() for this:
const utils = trpc.useContext()

utils.subRoute.prefetch({...inputs})
const utils = trpc.useContext()

utils.subRoute.prefetch({...inputs})
However, this prefetch() isn't being picked up by React Query and the data isn't being cached. Inspecting Chrome's devtools reveals that the fetch is being made, but it doesn't seem like React Query is picking up on that. https://trpc.io/docs/client/react/useContext Lmk if you have any success with this.
TTom6/30/2023
ill give it a try. thanks a lot. (sorry went away for a couple days) just tried this.... is there a way to make it prefetch only if there is nothing in the cache from that route? i got it to work. let me know if you figure out anything different
/* prefetch queries for subroutes */
useEffect(() => {
if (!uid || !creatorID) return;
if (creatorID !== uid) return;

const cachedSettingsData = trpcUtils.ui.getTournamentSettingsView.getData({ tournamentID });
if (!cachedSettingsData) trpcUtils.ui.getTournamentSettingsView.prefetch({ tournamentID });

const cachedOverlaysData = trpcUtils.overlays.getCustomOverlays.getData();
if (!cachedOverlaysData) trpcUtils.overlays.getCustomOverlays.prefetch();
}, [trpcUtils, tournamentID, creatorID, uid]);
/* prefetch queries for subroutes */
useEffect(() => {
if (!uid || !creatorID) return;
if (creatorID !== uid) return;

const cachedSettingsData = trpcUtils.ui.getTournamentSettingsView.getData({ tournamentID });
if (!cachedSettingsData) trpcUtils.ui.getTournamentSettingsView.prefetch({ tournamentID });

const cachedOverlaysData = trpcUtils.overlays.getCustomOverlays.getData();
if (!cachedOverlaysData) trpcUtils.overlays.getCustomOverlays.prefetch();
}, [trpcUtils, tournamentID, creatorID, uid]);
AKAlex / KATT 🐱7/1/2023
There's ensureData that does that
TTom7/1/2023
ensureData() seemed to refetch every time the useEffect was run even if the data was already prefetched With unfortunately meant that every page navigation it would fetch again which is unnecessary for my app Like it would refetch even if I was going to a route that didn’t require this data
AKAlex / KATT 🐱7/1/2023
Might be that the data is stale Check the react query docs about ensureData
TTom7/1/2023
Ok. I’ll try that later. Oh I just realized i wasn’t providing the right query when I tried ensure Data I only fixed it after I changed to the code I have above. That was probably the problem. Thanks Right query params*

Looking for more? Join the community!

T
tRPC

How to prefetch data on the client into the cache?

Join Server
Recommended Posts
It's possible to upload a zip file through trpc?I'm doing a screen where I need to upload a zip with pdfs files, it is possible with trpc? or I needroute needs jwt but it doesn'thi i do have a public route but when i i call it on the front end it requires a jwt token SERVER imcall socket.io events from inside trpc endpoints?how do i implement notifications when someone likes a post with socket.io? will every user have his Prefetch on useContext() is not being picked up by react-query.I need to prefetch one of my procedures to pre-load data for a page that the user can navigate to. Thow do you consume trpc endpoints from postman?I'm currently trying to set up testing for a full stack project while using trpc. but im unsure how tRPC 10 Mutations Firing Twice in Deployed Releases OnlyWe have a newly-upgraded tRPC 10 / ReactQuery 4 app and on two pages on which we have a lot of mutatuseQuery with query paramsHi, I'm wondering how to correctly handle query params as a useQuery input using Nextjs. ``` const infiniteQuery always undefined cursorHey there ! I'm struggling a bit to understand who the `useInfiniteQuery` is supposed to work with Migrating v9 to v10 - - using the client?I'm migrating a large project from trpc v9 to v10. There is a section of the code that uses the resuUsing tRPC and something else too? For building a mobile app / public API.A bit noobish, but I'm starting a new project w/ the t3 stack and I'm looking to build a mobile app whats the difference between context and middlewareand which 1 should I use for express session cookiesAxios, ExpressMiddleware and TRPCErrorsWe have an express based TRPC server and our procedures are calling our endpoints using axios. So whbase pathHi, don’t seem to be able to find documentation but is there a way to set the base path of the serveAny Benefit using tRPC for only remote api calls?Hi, does it make sense to use trpc if all I will be doing is calling a remote api? I have set it up Can I connect to a regular node express with socket.io?My idea is that I will host the socketio nodejs server in some server, and then use it with my nextjhow does one actually make trpc/client work with the app routerive been using trpc on the pages router for a while now and ive started putting together a next13 stwhen i deploy frontend trpc fails to compileim trying to deploy my create-react-app with tRPC to Vercel it works perfectly fine on localhosthow to rate limit in trpc express/nodejs server (not nextjs)each prodecure will have different rate limit for IP or sometthing idk maybe whole database will havDisable fetch on load```tsx import React, { useState } from "react"; import { api } from "../utils/api"; const Test = ()is it possible to record the requests on the server side ?I wanted to play them back then on the browser side . I wanted to do server side rendering in react