Data from useQuery is returning previous fetch response, before doing a new fetch, when page loads

[anoopezhap]

I am new to TanStack query and I am using v5 (stale time is 0) along with react

I am facing the following error.

When a page is loaded, the data from useQuery is the previous fetch response. But on the network, I can see new fetch happening. But even before fetching new data, the useQuery returns the old Data and my react page is displaying wrong data (the data from previous fetch). When I refresh the page manually, the correct data is displayed.

My code is as follows

function EditPost() {
  const { postId } = useParams();
  const { isPending, isError, isSuccess, data } = useQuery({
    queryKey: ["postbyid"],
    queryFn: () => getPostById(postId),
  });

  if (isPending) {
    return <p>Loading.....</p>;
  }

  if (isError) {
    return <p>Something happend</p>;
  }

  const postData = data[0];

  return <UpdatePost postData={postData} />;
}

export default EditPost;

My conclusions are:
I can see the fetch happening properly in the network tab, with the correct postId.
But somehow, even before the fetch is completed, the previous fetch response data is send to the postData and is displayed in the UpdatePost component.

Please help.

Thanks

[TkDodo]

sorry, you need to please provide a runnable reproduction of your situation because just showing some code that looks like a normal useQuery call doesn't help me in understanding and reproducing the situation.

When a page is loaded, the data from useQuery is the previous fetch response.

I'm also not sure what this sentence means. The query cache lives in-memory. If you load a page, there is no "previous fetch" unless you use our persisters, which you haven't mentioned.

[anoopezhap]

This was my first question and sorry for its low standard.
I figured out the problem. The problem was not passing the postId to the query key.

Thanks