How to use persistQueryClient?

[MaximilianLloyd]

Hi. I was wondering how you can use the persistQueryClient functionality with this?

[NetanelBasal]

As in React, I guess. Provide the function what it needs.

[MaximilianLloyd]

Ok, this is what i currently have. But it doesn't seem to be working

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      refetchOnWindowFocus: false
    }
  }
});

const persister = createSyncStoragePersister({
  storage: window.localStorage,
  serialize: (data) => compress(JSON.stringify(data)),
  deserialize: (data) => JSON.parse(decompress(data))
});

persistQueryClient({ queryClient, persister: persister , maxAge: Infinity });


persistQueryClientRestore({ queryClient, persister: persister });

and

providers: [
    provideQueryClient(queryClient)
]

[NetanelBasal]

Can you provide a stackblitz, please?

[sir-alex]

@MaximilianLloyd did you manage to make it work?

[cookavich]

Would also like to know.

[luii]

@NetanelBasal Wouldn't it be better to wrap this stuff into a ENVIRONMENT_INITIALIZER / APP_INITIALIZER and make it persist through the providers? Or am i missing something here?

export const provideQueryClientPersistance = (persister) => {
  return {
    provide: ENVIRONMENT_INITIALIZER,
    multi: true,
    useValue() {
      const queryClient = inject(QueryClientService);
      persistQueryClient({ queryClient, persister: persister , maxAge: Infinity });
      persistQueryClientRestore({ queryClient, persister: persister });
    },
  };
}

const persister = createSyncStoragePersister({
  storage: window.localStorage,
  serialize: (data) => compress(JSON.stringify(data)),
  deserialize: (data) => JSON.parse(decompress(data))
});

bootstrapApplication(AppComponent, {
  providers: [
    provideQueryClientOptions({
      defaultOptions: {
        queries: {
          staleTime: Infinity,
          refetchOnWindowFocus: false
        }
      }
    }),
    provideQueryClientPersistance(persister)
  ],
});

[stevebrowndotco]

Hi @luii thanks for that, however for me only @tanstack/query-persist-client-core exports persistQueryClient and persistQueryClientRestore . I am getting some good success now with my offline support persister, which works in this regard.

[luii]

Thanks for correcting this mistake of mine, i dont use the persister in my app so thats why i only guessed

[stevebrowndotco]

That's no problem @luii ! I think this library might benefit from a persister example for offline support. I'm currently firming up my solution and would be happy to create a PR with a doc update when I'm done

[alfredoperez]

@luii is there a place to find an example for offline support?

[luii]

@stevebrowndotco did you made any advancements towards your Pull-Request?

@alfredoperez Atm no - there is no written Guide on it; however, the general direction you need to go would be to first create a persister like i did above (, you probably need to adjust some things for your usecase).
The persister is only mirroring the querycache into the respective storage adapter you provided (that may be localStorage, sessionStorage, IndexedDB or even your own storage adapter).
If your queryclient persister has an appropriate gcTime then tanstack reuses what was written into your storage, on, lets say when you refresh a page. Tanstack query does not cache any http(s) requests, it only caches the internal QueryCache to the respective storage. See more >>

To get full offline capability you would need to convert your application to a PWA so that the http(s) request you configured on it get cached. This way when your application goes offline it will replay these respective requests back to you, so that you can work with this data. For more information on Service Workers