Theo's Typesafe Cult•8mo ago

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•8mo 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•8mo 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•8mo 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•8mo ago

hi @Ruben Silva but t3 uses tRPC instead of the fetch api...

Ruben Silva•8mo 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•8mo 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•8mo 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();

fotoflo•8mo ago

didnt realize it was cached what is the links array? All these procedures are done on the server

Ruben Silva•8mo 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.

Gaming

Programming

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