Topics

Theo's Typesafe Cult•2w ago

I have been trying to get cache working with React-Query and Next.JS

Hello there, I'm trying to get this cache to work but I have searched far and wide and unless I'm blind or I didn't use the right keywords, I can't get this to work. Here is the sample code:

const { data, isPending, isStale } = useQuery({
  queryKey: ["hilol"],
  queryFn: () => {
    console.log('HIIIII')
    return "Hi"
  },
  gcTime: 5 * 60 * 1000,
  staleTime: 7 * 60 * 1000
});

const { data, isPending, isStale } = useQuery({
  queryKey: ["hilol"],
  queryFn: () => {
    console.log('HIIIII')
    return "Hi"
  },
  gcTime: 5 * 60 * 1000,
  staleTime: 7 * 60 * 1000
});

No matter how much refreshing I do on the page it still says it's pending and it's stale until the data loads in and the HIIIII gets logged.

Solution:

By default React query doesn’t use a persistent cache - so when you refresh you lose everything. Check out the docs here: https://tanstack.com/query/latest/docs/framework/react/plugins/persistQueryClient...

persistQueryClient | TanStack Query React Docs

This is set of utilities for interacting with "persisters" which save your queryClient for later use. Different persisters can be used to store your client and cache to many different storage layers. Build Persisters

Jump to solution

2 Replies

Solution

greypixel•2w ago

By default React query doesn’t use a persistent cache - so when you refresh you lose everything. Check out the docs here: https://tanstack.com/query/latest/docs/framework/react/plugins/persistQueryClient

persistQueryClient | TanStack Query React Docs

This is set of utilities for interacting with "persisters" which save your queryClient for later use. Different persisters can be used to store your client and cache to many different storage layers. Build Persisters

Khao•2w ago

Ah that would make so much more sense, sorry i'm quite new to TanStack Query. Once I get it working I will mark you as the solution.

Theo's Typesafe Cult Join

21KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

Anyone who knows CF Zero-Trust well?I have a homelob running proxmox, i have exposed it through a Tunnel, i have it behind Access too, i Vercel server environment variables not pulling inI am currently using using [T3 Env](https://env.t3.gg/) for type safe environment variables however Shadcn Dialog + Form Error: React.Children.onlyHello, I'm want to use a From from shadcn inside a dialog from shadcn but I have this error : Error Most efficient monolith structure to have an Express.js REST API with Next.js SSR client?https://stackoverflow.com/questions/78670127/most-efficient-monolith-starter-project-structure-to-ha View transitions aren't working with multiple elements with the same classnameHey, I have quite a unique problem and I tried searching for the solution but view transitions are r create t3 app breaking next-theme?????dudes and dudettes. im having a surreal issue with next theme. though if i initiated the whole app u Turbo and prisma dont work together?its weird that prisma does give errors such as `cannot convert null to object` on some stuff like cr json schema to yup raw versionI am trying to get the raw yup object with the chaining functions from a json schema. Tried some lib Prefetching deeply nested loading.tsx doesn't work on NextJS 14I have been banging my head around this for 3 days but i just don't understand why this is happening ERROR! Invalid config: UnknownFileTypetrying to use upload thing for my project. I am working with source 2 demo files. I used this mimety