Failing to enable caching with `useQueries`

As the title indicates, I’m having trouble seeing any effects of the cache with the useQueries function. Will include the code I’m testing below. While the query itself works, properly running fetchBond and returning correct results, both localstorage and cache in my browser remain empty, and a refresh of the page prompts the loading of new data (no stale data appears, I get a full loading state)

I’m hoping to write a web3 query with a composable like this:

export const useBondListQuery = (
  bondIds: number[] | Ref<number[]>,
  options?: Omit<
    UseQueryOptions<unknown, unknown, unknown, (string | number)[]>,
    "queryFn" | "queryKey"
  >
) => {
  const { status } = useWeb3();
  const { contracts } = useContracts();

  const queryKeys = computed(() =>
    ((bondIds as Ref<number[]>).value || bondIds).map((bondId) => ({
      queryKey: ["bond", bondId],
      queryFn: (ctx: QueryFunctionContext) =>
        fetchBond(contracts.value.Core, ctx),
      ...queryOptions,
      ...options,
      enabled:
        bondId !== undefined &&
        status.value === ConnectionStatus.CONNECTED &&
        contracts.value.Core !== undefined &&
        (options?.enabled ?? true),
    }))
  );

  return useQueries(queryKeys) as readonly QueryObserverResult<
    FetchBondResult,
    unknown
  >[];
};

I’ve changed some cache settings in an attempt to fix this. The queryOptions you see referenced is containing these. As you can see, I’m hoping to minimize queries and store a lot of this data on browser cache if possible (it’s mostly static data tbh).

const queryOptions = {
  refetchOnWindowFocus: false,
  cacheTime: 1000 * 60 * 5,
  staleTime: 1000 * 60 * 5,
  retry: false,
};

Let me know if this is possible or if I’m missing something from the documentation entirely

[DamianOsipiuk]

@chetzof Hi, yes it’s possible. Please refer to the example - https://github.com/TanStack/query/blob/main/examples/vue/persister/src/main.ts

[chetzof]

I think the keyword that you use here is sessions.

Vue-Query does not store the data between sessions by default.

Vue-Query caches the data between multiple calls to the same endpoint in one session. Ex multiple components request same data, or you navitage to a different page in the app and back.

To make data persist between multiple sessions you would have to use persist plugin. Unfortunately it’s not yet ported to Vue-Query. I intend to add that capability after migration to @TanStack monorepo.

Is see that the package was migrated to @Tanstack monorepo. Is is possible to use the persist plugin already?