How initialStale Configuration Works in React Query

In a Query in React Query, if we supply initialData, that will be shown by default. Only when user revisits the page, the Query does a network call to refresh the data. This sometimes creates a bad user experience because user is seeing a stale initial data.

We can mark the initialData as stale by setting initialStale to true.

const userQuery = useQuery(
  "user",
  () =>
    fetch(
      "https://jsonplaceholder.typicode.com/users?email=Sincere@april.biz"
    ).then((res) => res.json()),
  {
    initialData: intialdata,
    initialStale: true,  }
);

Now a user will see the page with initial data immediately. But in the background, the query will go and fetch the latest content and updates the frontend once data is ready.