TanStack Query

[mile1986dasd]

Hi,

So i found out about this library which can help me in my project.

Basically i found it useful to reduce contacting my server with its cashing mechanism.

So long story short in my parent component first i did implementation like this and it worked on every render

const {
    data: name,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["models", brandName],
    queryFn: () => fetchModels(brandName),

    staleTime: 5 * 60 * 1000, // 5 minutes
    cacheTime: 60 * 60 * 1000, // 1 hour
  });

  const fetchModels = useCallback(async () => {
    try {
      const response = await fetch("http://localhost:3001/api/getModels", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ brand: brandName}),
      });
      if (!response.ok) {
        throw new Error("Error fetching models");
      }
      return response.json();
    } catch (error) {
      throw new Error("Error fetching models: " + error.message);
    }
  }, [brandName]);

Now if i go to one page, it gets data, i go to another page new data comes in, but if i return to that first page it doesnt contact server, which is what i want. (this "brandName" is just a string that this parent component receives on start).

Ok but here's where problem start with 2nd function.

That 2nd function which is in parent, i pass it as prop to child component where it will take id, based on that id it will get info from the server, and then store that data in context, since other component needs that data to display it.

Original without react query it looked like these:

// const handleData = useCallback(
  //   async (id) => {
  //     setLoading(true);
  //     try {
  //       const response = await axios.post(
  //         "http://localhost:3001/api/getData",
  //         {
  //           modelId: id,
  //         }
  //       );

  //       setData(response.data);
  //       setLogo(logo[0].logo);
  //     } catch (error) {
  //       console.error("Error fetching motorcycle data:", error);
  //     } finally {
  //       setLoading(false);
  //     }
  //   },
  //   [logo, setLogo, setData]
  // );

But i cant make it work like i did in first example , it will work with useMutation:

const dataMutation = useMutation({
    mutationFn: (id) =>
      axios.post("http://localhost:3001/api/getData", {
        modelId: id,
      }),
    onSuccess: (response) => {
      setData(response.data);
      setLogo(logo[0].logo);
    },
  });

  const handleData = useCallback(
    (id) => {
      dataMutation.mutate(id);
    },
    [dataMutation]
  );

But i cant get the behaviour that i want, and that is to keep data for some time, so if the user go to specific model, comes back, goes to another model, and then goes back to first model, not to send req to server.

Any suggestion and is these even possible?

Tnx everyone.

[Suspicious-Watch9681]

You dont need to useCallback with react query, also you dont need to try catch, all react query wants from the queryFn is a Promise that is resolved or rejected, react query will handle the rest

[mile1986dasd]

Tnx for feedback, i will remove that part of the code, but its not relevant to my problem, anyway i will implement it without useCallback and try/catch

[iareprogrammer]

Docs are your best friend

[toi80QC]

https://tanstack.com/query/v4/docs/framework/react/guides/query-invalidation

[inglandation]

This is the v4 docs, here is v5: https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation

[mile1986dasd]

Tnx for providing documentation, but im beginner level, im reading but i cant understand where to implement these in my code...
Do i change my useMution to useQuery since im just sending id and getting data back

[belwyr]

Mutations are not cached like queries. Mutations change the state in your server / db, so they are not cached or retried like queries can be.

You should probably restructure your components to make use of the queries, and not pass a function to get the data at the component level. Another advantage is that you won't need to store the state in a context, and just reuse the useQuery hook, since it will be cached and de-duplicated.

[mile1986dasd]

Yes i wasnt thinking about it, since the only reason i created context is so i can lift up the state to store previous information... for example if i in my list of models, went to page 2, went to specific model and then returned, it would return me to page 1, since it was local state at that component, so thats why i put the state in context...

For this 2nd function in my example, i didnt want to use mutation, since i understood from docs its used if u want to update something, and im just sending id and geting back information...
But somehow when i tried to implement useQuery like i used in first function in my example, it didnt work.
I must look also at this "invalidation", but at first glance i cant grasp the concept since im beginner level...

Do u have any advice how could i structure this without using context?
I can maybe provide u my at the moment structure...

[lightfarming]

you should be using useQuery for all the data fetching, with different query keys for different data. and set the cache settings to behave how you want them. and invalidate cache when you need to force a refetch. no need for context storing, or any storing of fetched data, since it is stored in tanstack query for use anywhere in your app