Why doesn't this async TanStack (React) Query function run unless I hit reload or re-expose the page?

[dstromberg]

Hello.

I'm a React and JavaScript newbie.

I'm looking at the code below, and am at a loss to explain why "barney 0.5" is only logged on page reload or page re-expose, while barney 0.2 is logged every time as expected.

BTW, it looks like none of e, al and iv are from useState. They're apparently just simple booleans.

I've googled and googled, but nothing. And I asked on Stackoverflow, and got a response saying it's "dependent on how the query fn is being executed"

Anyone?

BTW, I'm using:
$ npm list | grep query
below cmd output started 2024 Fri Mar 01 03:31:46 PM PST
+-- @tanstack/[email protected]
+-- @tanstack/[email protected]

A side question: If the enabled property is an evaluated-once-boolean expression (as it looks) and not a function that returns a boolean, how does react know to re-evaluate the expression for the retry counter?

TIA!

const uaq = <
    TQFD = unknown,
    TError = AxiosError,
    TData = TQFD,
    TQK,
    TRD = TQFD
>(
    options: UAQO<
        TQFD,
        TError,
        TData,
        TQK,
        TRD
    >
) => {
    const {
        e = true,
        rc = {},
        trd,
    } = options;
    const { p, q, iv } = useApiPathname(options);
    const {
        il: al,
        data: { at, h: ah } = {},
    } = uaaq();

    console.log(`barney 0: date: ${new Date()}`);
    console.log(`barney 0.1: e: ${e}, al: ${al}, iv: ${iv}`)
    console.log(`barney 0.2: options: ${JSON.stringify(options)}`)

    return useQuery<TQFD, TError, TData, TQK>({
        // Set some default options, which may be overridden
        keepPreviousData: true,
        retry: 3,
        // Get the data
        queryFn: async () => {
            console.log(`barney 0.5: at: ${at}`);

            if (!at) throw new Error('Failed.');

            console.log(`barney 0.6: rc: ${rc}`);

            console.log(`barney 1: date: ${new Date()}`);
            console.log(`barney 2: p: ${p}`);
            console.log(`barney 3: h: : ${JSON.stringify({ ...ah, ...h })}`);
            console.log(`barney 4: trd: ${trd}`);

            // Make the fetch request
            const { h = {} } = rc;
            const { data } = await apiClient.get(p, {
                params: q,
                headers: { ...ah, ...h },
                ...rc,
            });

            console.log(`barney 5: data: ${JSON.stringify(data, undefined, 2)}`);

            // Return the data from the response (optionally after transforming it)
            return trd ? trd(data) : data;
        },
        // Apply the other options
        ...options,
        // Wait for values to be filled in....
        enabled: e && !al && iv,
    });
};

[dstromberg]

It turned out the queryKey was too inspecific, which was causing the data to be pulled from cache - even for pages that hadn't yet been pulled from the API.