equal-jade

Cache seemingly not working

I'm trying to use tanstack query to call my AWS AppSync GraphQL API, which is working in that it sends a request and receives a response, however it doesn't appear to be caching the response from the API (when I use the refetch function, it always resends a network request to the API. Here's some minimal code:

const getActiveProgrammes = async () => {
    console.log("getActiveProgrammes...");
    const apiClient = getApiClient();

    const resp = await apiClient.graphql({ query: getActiveProgrammesQuery });
    if (resp.errors !== undefined && resp.errors.length > 0) {
        console.log(JSON.stringify({ errors: resp.errors }));
        throw new Error(resp.errors.map((error) => error.toJSON()).join("\n"));
    }
    console.log(
        `getActiveProgrammes done: ${JSON.stringify(
            resp.data.getActiveProgrammes
        )}`
    );
    return resp.data.getActiveProgrammes;
};

const Programmes = () => {
    const { data, error, isPending, refetch } = useQuery({
        queryFn: getActiveProgrammes,
        queryKey: ["activeProgrammes"],
        staleTime: 1000 * 30 // should cache for 30 seconds
    });


    if (isPending) return "Fetching data from backend...";
    if (error) return `An error occurred getting data: ${error.message}`;
    return <>
        <div>
            {data.length === 0 ? (
                <p>No programmes</p>
            ) : (
                data.map((programme) => (
                    ...
                ))
            )}
        </div>
        <button onClick=() => void refetch()}>Refresh Data</button>
    </>
}

const queryClient = new QueryClient();

ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
        <QueryClientProvider client={queryClient}>
            <Programmes />
        </QueryClientProvider>
    </React.StrictMode>
);

const getActiveProgrammes = async () => {
    console.log("getActiveProgrammes...");
    const apiClient = getApiClient();

    const resp = await apiClient.graphql({ query: getActiveProgrammesQuery });
    if (resp.errors !== undefined && resp.errors.length > 0) {
        console.log(JSON.stringify({ errors: resp.errors }));
        throw new Error(resp.errors.map((error) => error.toJSON()).join("\n"));
    }
    console.log(
        `getActiveProgrammes done: ${JSON.stringify(
            resp.data.getActiveProgrammes
        )}`
    );
    return resp.data.getActiveProgrammes;
};

const Programmes = () => {
    const { data, error, isPending, refetch } = useQuery({
        queryFn: getActiveProgrammes,
        queryKey: ["activeProgrammes"],
        staleTime: 1000 * 30 // should cache for 30 seconds
    });


    if (isPending) return "Fetching data from backend...";
    if (error) return `An error occurred getting data: ${error.message}`;
    return <>
        <div>
            {data.length === 0 ? (
                <p>No programmes</p>
            ) : (
                data.map((programme) => (
                    ...
                ))
            )}
        </div>
        <button onClick=() => void refetch()}>Refresh Data</button>
    </>
}

const queryClient = new QueryClient();

ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
        <QueryClientProvider client={queryClient}>
            <Programmes />
        </QueryClientProvider>
    </React.StrictMode>
);

Any ideas as to why it's not caching?

24 Replies

constant-blue•10mo ago

Hi How are u? I am interested on your post. thanks.

equal-jadeOP•10mo ago

Not quite sure what you mean by this, but I've not managed to figure it out if that's what you're after Are you having issues with caching too?

constant-blue•10mo ago

yeah Are u using github?

equal-jadeOP•10mo ago

My code is closed-source unfortunately

constant-blue•10mo ago

Okay Can u send me your source?

equal-jadeOP•10mo ago

^ The above is about all I can share

constant-blue•10mo ago

Okay Excuse me where are u from? ARe u there? const { data, error, isLoading, refetch } = useQuery( ["getData"], // Ensure a stable key async () => { const response = await fetchGraphQL(API, query, variables); return response.data; }, { staleTime: 1000 * 60 * 5, // Cache data for 5 minutes } ); Make sure you are using a consistent key when defining your query,

equal-jadeOP•10mo ago

Yeah, I am. Specifically the queryKey: ["activeProgrammes"].

constant-blue•10mo ago

Okay increase the staletime

equal-jadeOP•10mo ago

Yeah, I have. Nothing seems to work

constant-blue•10mo ago

cacheTime: 1000 * 60 * 10, // 10 minutes

equal-jadeOP•10mo ago

I've tried that Also tried 30/60/120 mins Is refetch perhaps supposed to bypass cache?

constant-blue•10mo ago

yeah

equal-jadeOP•10mo ago

🤔

equal-jadeOP•10mo ago

That's not what this says: https://youtu.be/mPaCnwpFvZY?feature=shared&t=480

Austin Davis

YouTube

TanStack Query - How to become a React Query God

Are you tired of wrestling with useEffect and manual data fetching in React? Writing multiple pieces of state for one query and having to follow weird practices to get your query to work correctly? In this video, I’ll show you how to leave those frustrations behind and level up your querying game using TanStack Query. We’ll dive straight into t...

constant-blue•10mo ago

Okay so Are u beginner of Tanstack?

equal-jadeOP•10mo ago

Yes

constant-blue•10mo ago

Okay I will help you. I have 2 years. so where are u from?

equal-jadeOP•10mo ago

constant-blue•10mo ago

Okay

equal-jadeOP•10mo ago

If the component is rerendered from hot-reload then it uses the cache. I was just expecting the refetch to also use the cache, because that's what the tutorial said would happen

constant-blue•10mo ago

yeah I see. How many days do u want to fix? ARe u there?

absent-sapphire•10mo ago

@TizzySaurus If you call refetch you are forcing a fetch...

equal-jadeOP•10mo ago

Yeah, it makes sense now that I know. I was just mislead by the tutorial I was watching

Gaming

Programming

Cache seemingly not working

Did you find this page helpful?