React Query how to use cache data to fetch by id?

Question

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 component 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);
    });
  },
});

Oliver Ilmjärv · Accepted Answer · 2022-07-26 05:59:27Z

2

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

At first, if the query hasnt been made yet, the data is supposed to be undefined. but since there is no state change, the component 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 incoming data to the same key you are already requesting it with. In this case, its ["posts", id: number]

Edit: added extra information

edited Jul 26, 2022 at 5:59

answered Jul 26, 2022 at 5:53

Oliver Ilmjärv

3412 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tryingToBeBetter Over a year ago

Yes I can just use the defined hook but it will call the actual api /posts/1 and I dont want to make unnecessary call if i already have posts cached

Oliver Ilmjärv Over a year ago

in this case you can check if you have data cached under this key and enable the query based on that information. ` enabled: queryClient.getQueryData(["posts", id]).lenght > 0`

tryingToBeBetter · Accepted Answer · 2022-07-26 07:55:39Z

1

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);
});

answered Jul 26, 2022 at 7:55

tryingToBeBetter

4351 gold badge7 silver badges26 bronze badges

Collectives™ on Stack Overflow

React Query how to use cache data to fetch by id?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related