Disabling and enabling all queries

[Stekmo]

I currently have a web application where I have multiple queries that depend on an access token in order to authenticate against an external api. I fetch this access token from my server once the user loads the app. I want all the queries that rely on this access token to not run until I've fetched and set the access token.

It seems that with [email protected] I can set enabled in the queries default options to be false, and then change it to true along with calling queryClient.refetchQueries once I have the access token set.
This does not seem to work with @tanstack/[email protected] however and I can't figure out why, or what alternatives there is.
I would greatly prefer being able to do this on a global level and not having to implement it on a per query basis.

Codesandbox for [email protected] (Works on this version)
Codesandbox for @tanstack/[email protected] (Doesn't work on this version)

App.tsx

import { Users } from "./Users";
import {
  QueryClient,
  QueryClientProvider,
  useQueryClient
} from "@tanstack/react-query";
import { useEffect } from "react";
import { getAccessToken, setAuthToken } from "./http";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      enabled: false
    }
  }
});

const EnableQueriesWhenHasAccessToken = () => {
  const queryClient = useQueryClient();

  useEffect(() => {
    getAccessToken()
      .then((token) => setAuthToken(token))
      .then(() => {
        queryClient.setDefaultOptions({
          queries: {
            enabled: true
          }
        });
        queryClient.refetchQueries();
      });
  }, [queryClient]);

  return null;
};

export default function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <EnableQueriesWhenHasAccessToken />
        <Users />
      </QueryClientProvider>
    </div>
  );
}

Users.tsx

import { useQuery } from "@tanstack/react-query";
import { getUsers } from "./http";

const useUsersQuery = () => useQuery(["users"], getUsers);

export const Users = () => {
  const { data: users, isLoading } = useUsersQuery();

  if (isLoading || !users) {
    return <p>Loading users...</p>;
  }

  return (
    <div>
      <h3>Users:</h3>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
};

let token: string | null = null;

export const setAuthToken = (accessToken: string) => {
  token = accessToken;
};

export const getUsers = (): Promise<{ id: number; name: string }[]> => {
  console.log("Calling get users endpoint with access token", token);

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          id: 1,
          name: "John"
        },
        {
          id: 2,
          name: "Jane"
        }
      ]);
    }, 1000);
  });
};

export const getAccessToken = (): Promise<string> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("MY_ACCESS_TOKEN");
    }, 1000);
  });
};

[TkDodo]

changing defaultOptions has no effect on queries that have already been created. What could work is making the Users component a child of EnableQueriesWhenHasAccessToken and to render it conditionally, only after the token has been obtained.

[Stekmo]

That was also one of the solutions I thought about, however since I have multiple queries that depends on this access token, I either need to implement the conditional render logic per component or block rendering of the entire app while the access token is being fetched.

Is there no way to configure it globally like it was in [email protected]?

[TkDodo]

there was a bug in v3 that made disabled queries still be refetched by queryClient.refetchQueries. We fixed that bug in v4:

• fix(core): do not refetch disabled queries #3223

so, no, there is no going back. I'm afraid you have been "using" this bug to your advantage for now, but it's still a bug 😅 .

[Stekmo]

Ahh that explains a lot! Thanks a lot, I'll probably go with your first suggestion :)