conscious-sapphire

queryClient.getQueryData returns undefined when page refresh

Hey guys i encountered the weird issue with queryClient.getQueryData which returns undefined when I refresh the page. But i can see the cache data in localstorage. and the other thing is its working fine when i run with localhost connecting the soruce. but when it builds its undefined on page refresh

const queryClient = new QueryClient();
 const articleStories = queryClient.getQueryData(['home-data']);

React query version is ^4.29.7

12 Replies

genetic-orange•14mo ago

https://tanstack.com/query/latest/docs/framework/react/reference/useQueryClient

useQueryClient | TanStack Query React Docs

The useQueryClient hook returns the current QueryClient instance. `tsx

conscious-sapphireOP•14mo ago

Its not working. please remember i hard reload the page. at that time it faled to load from cahced data from localstorage. I tryied this too

const queryCache = queryClient.getQueryCache();
    const queryKeys = queryCache.getAll().map((cache) => cache.queryKey);

it only returns the fresh queries which is used in current page. The previous queries are now showing when hard reload. but when i navigate page to page or on button click it shows all cache query data

absent-sapphire•14mo ago

How is data from localstorage getting into the query cache? Code snippets never tell the whole story and are not helpful. Please show a minimal reproduction

conscious-sapphireOP•14mo ago


const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
      refetchOnWindowFocus: false,
    },
  },
});

const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/lib/index.prod.js').then((d) => ({
    default: d.ReactQueryDevtools,
  }))
);

const persister = createSyncStoragePersister({
  storage: window.localStorage,
});

export const ReactQueryProvider: React.FC<CommonProps> = ({ children }) => {
  const { isNative } = usePlatformContext();

  return (
    <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
      <QueryClientProvider client={queryClient}>
        {children}

       
      </QueryClientProvider>
    </PersistQueryClientProvider>
  );
};

this is what i set mate and inside component i check like this

const queryClient = useQueryClient();
    const articleState = useArticleState();
    const query =
      articleState?.page === 'home'
        ? [

${articleState?.page}-data

]
        : [

${articleState?.page}-data

, articleState?.page];

    const articleStories: PageDataRequest | undefined = queryClient.getQueryData(query);

absent-sapphire•14mo ago

you shouldn't really be using getQueryData in a component lifecycle. It's not reactive and won't re-render the component on its own when new data comes in. That's what you're seeing here - the restore from the storage is async, so when the component first renders, cache is empty. After the cache is filled, subscribers created by useQuery will re-render, but what you have will not.

conscious-sapphireOP•14mo ago

so why its not happening for me.. what am i missing here. its a issue from my end or ?? 🙏

absent-sapphire•14mo ago

I just explained that ...

That's what you're seeing here - the restore from the storage is async, so when the component first renders, cache is empty. After the cache is filled, subscribers created by useQuery will re-render, but what you have will not.

conscious-sapphireOP•14mo ago

so the solution is to put inside lifecycle hook right?

absent-sapphire•14mo ago

the solution is to always useQuery instead of queryClient.getQueryData when you are inside a component

conscious-sapphireOP•14mo ago

okay, mmm coz my situation is i am loading the home page with stories. when click on a story i create navigation based on home page stories for swipe feature. so when hard refresh i could not get the swiper work due to this Just one final thing can I use usequery to just to validate to make sure the specific query key is present in query cache? Because I don’t to use staleTime due to required fresh data every time when user navigate to homepage. Also since I am in detail page I don’t want to fetch homepage data every time I swipe. Simply I need to know the specific query key is present in cache. Then load he details in swiper if not just load the details without swiping enabled Any code sample if you think that could work 🙏🙏🙏

conscious-sapphireOP•14mo ago

Think I found the correct doc https://tanstack.com/query/v4/docs/framework/react/guides/disabling-queries

Disabling/Pausing Queries | TanStack Query React Docs

If you ever want to disable a query from automatically running, you can use the enabled = false option. When enabled is false:

conscious-sapphireOP•14mo ago

Thanks mate I think I have clarity now

Gaming

Programming

queryClient.getQueryData returns undefined when page refresh

Did you find this page helpful?