I am fetching all posts from json place holder api /posts and cache it as query cache key as ["posts"]

I want to use the cache posts to fetch by id

Right now I am trying

export const useGetPostById = (id: any) => {


const service = getQueryService();
  const queryClient = useQueryClient();
  const { data: post } = useQuery(["post", id], () => {
    return service.getPostById(id);
  });
  return {
    post,
  };
};

and on my ponent trying to fetch this data by

const stupidData = queryClient.getQueryData(["posts", id]);
console.log(stupidData, "STUPID");

however here stupidData is undefined..

Here is how I'm fetching all posts

const { data: posts } = useQuery(["posts"], service.getPosts, {
  enabled: true,
  cacheTime: Infinity,
  onSuccess: (data) => {
    console.log("DATA", data);
    data?.data.map((post: any) => {
      queryClient.setQueryData(["posts", post.id], post);
    });
  },
});

I am fetching all posts from json place holder api /posts and cache it as query cache key as ["posts"]

I want to use the cache posts to fetch by id

Right now I am trying

export const useGetPostById = (id: any) => {


const service = getQueryService();
  const queryClient = useQueryClient();
  const { data: post } = useQuery(["post", id], () => {
    return service.getPostById(id);
  });
  return {
    post,
  };
};

and on my ponent trying to fetch this data by

const stupidData = queryClient.getQueryData(["posts", id]);
console.log(stupidData, "STUPID");

however here stupidData is undefined..

Here is how I'm fetching all posts

const { data: posts } = useQuery(["posts"], service.getPosts, {
  enabled: true,
  cacheTime: Infinity,
  onSuccess: (data) => {
    console.log("DATA", data);
    data?.data.map((post: any) => {
      queryClient.setQueryData(["posts", post.id], post);
    });
  },
});

• javascript
• reactjs
• react-query

2 Answers 2

instead of accessing the queryData from queryClient.getQueryData() can you use the defined hook in the ponent ?

At first, if the query hasnt been made yet, the data is supposed to be undefined. but since there is no state change, the ponent will not rerender to get the fetched query data.

export const useGetPostById = (id: number) => {
  const service = getQueryService();
  const queryClient = useQueryClient();
  const { data: post } = useQuery(["posts", id], () => service.getPostById(id);
  );
  return {
    post,
  };
}

const Component = () => {
  const id = 10;
  const { post } =  useGetPostById(id)
  ...
}

Addressing your last code example, you can delete the onSuccess function content. this is handeled automatically. The queryClient will save the ining data to the same key you are already requesting it with. In this case, its ["posts", id: number]

Edit: added extra information

Instead of just accessing the cache, I was just able to query the posts and find by id like

  const myItem = posts?.data.find((item: any) => {
return item.id === Number(id);
});