Where to put / how to cache frequently used user info?

hi guys, i think i made a big mistake - i put a lot of logic in my session callback to build a nice session.user object that has a lot of the things i need to reference all the time on it. It all worked fine until i pushed to Vercel - now it's crazy slow.... So where does this kind of information typically go? My current session: https://pastebin.pl/view/d2329da1
a - Pastebin
Pastebin.pl is a website where you can store code/text online for a set period of time and share to anybody on earth
9 Replies
fotoflo
fotoflo13mo ago
im thinking to move it to the signin callback and then store it in a userContext is there a way to just store it in a session cache?
fotoflo
fotoflo13mo ago
https://nextjs.org/docs/app/building-your-application/caching How does the trpc caching work? this is specifically for fetch/rest
Building Your Application: Caching
An overview of caching mechanisms in Next.js.
Ruben Silva
Ruben Silva13mo ago
By default, all data you fetch using the fetch API, is cached. You can have the same fetch request in multiple pages or components, it will only make one request. The problem, in your case, is that your user session is indeed too complex, every time you add a new team, you will need to revalidate the cached data. It would be better for perfomance, to just restructure your data object.
fotoflo
fotoflo13mo ago
hi @Ruben Silva but t3 uses tRPC instead of the fetch api...
Ruben Silva
Ruben Silva13mo ago
My bad, I thought you weren't using tRPC. In that case, because tRPC uses React Query under the hood, you can take a look at their caching examples. Basically you define a query key for your request (["user"] in your case), and every time a request is made using that key, it will fetch the data that was stored on the cache, and when you use a mutation to update that data, you will need to invalidate that query to update it with the fresh data. You can find a better explanation in the links below: https://tanstack.com/query/latest/docs/react/guides/caching https://tanstack.com/query/latest/docs/react/guides/invalidations-from-mutations
Caching Examples | TanStack Query Docs
Please thoroughly read the Important Defaults before reading this guide Basic Example
Invalidations from Mutations | TanStack Query Docs
Invalidating queries is only half the battle. Knowing when to invalidate them is the other half. Usually when a mutation in your app succeeds, it's VERY likely that there are related queries in your application that need to be invalidated and possibly refetched to account for the new changes from your mutation. For example, assume we have a mu...
Ruben Silva
Ruben Silva13mo ago
Alternately, you could use tRPC on the server, but I'm not sure NextJs would store the data on the server cache.
import { httpBatchLink } from "@trpc/client";
import { appRouter } from "@/server";

export const serverClient = appRouter.createCaller({
links: [
httpBatchLink({
url: "http://localhost:3000/api/trpc",
}),
],
});
import { httpBatchLink } from "@trpc/client";
import { appRouter } from "@/server";

export const serverClient = appRouter.createCaller({
links: [
httpBatchLink({
url: "http://localhost:3000/api/trpc",
}),
],
});
fotoflo
fotoflo13mo ago
Oh interesting, - the router defines the key right? so the getUsersOnTeam will cache and the updateTeamName mutation updates the cache automatically when called like this: trpc.team.updateTeamName.useMutation();
No description
fotoflo
fotoflo13mo ago
didnt realize it was cached what is the links array? All these procedures are done on the server
Ruben Silva
Ruben Silva13mo ago
Are you mentioning the query keys (["user"])? If so, those keys are some sort of cache identifiers. Every piece of data that you store as cache, is labeled with a query key, so that when you need to make something with it, like revalidating it, you can target it with the query key.
Want results from more Discord servers?
Add your server