T
TanStack•3y ago
fascinating-indigo

Do you see an error with this mutation/query code?

Hi, I'm trying tanstack query and I have a very basic example, a list of series and a selected serie (which I refetch to get additional data for this. specific serie). When I click on a serie I select it and when I click on the hearth I want to make the serie favorite or not. 
  const mutation = useMutation({
    mutationFn: (serie: SerieType) => {
      return fetch(`http://localhost:3000/series/${serie.id}/fav`, {
        method: "POST",
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["series"] });
    },
  });
  const clickFav = (e: any, serie: SerieType) => {
    mutation.mutate(serie);
  };
  const mutation = useMutation({
    mutationFn: (serie: SerieType) => {
      return fetch(`http://localhost:3000/series/${serie.id}/fav`, {
        method: "POST",
      });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["series"] });
    },
  });
  const clickFav = (e: any, serie: SerieType) => {
    mutation.mutate(serie);
  };
 const { isLoading, error, data, isSuccess } = useQuery<SerieType[]>({
    queryKey: ["series"],
    queryFn: () => {
      console.log("fetchSeries");
      return fetch("http://localhost:3000/series").then((res) => res.json());
    },
  });

  const [selectdedSerie, setSelectdedSerie] = useState<SerieType | null>(null);

  const { data: serie, isSuccess: isSerieSuccess } = useQuery<SerieType>({
    queryKey: ["series", selectdedSerie?.id],
    queryFn: () => {
      return fetch(`http://localhost:3000/series/${selectdedSerie?.id}`).then(
        (res) => res.json()
      );
    },
    enabled: !!selectdedSerie,
  });
  const clickSerie = (serie: SerieType) => {
    setSelectdedSerie(serie);
  };
  if (!isSuccess) {
    return <p>pas de success</p>;
  }
  console.log(serie?.isFav); // works but the return doesn't have the right value
  return (
    <div className="App min-h-screen bg-slate-800 text-white ">
      <div className="grid grid-cols-5 gap-4">
        {data.map((serie) => (
          <Serie
            onClick={() => clickSerie(serie)}
            key={serie.id}
            serie={serie}
          ></Serie>
        ))}
      </div>
      {isSerieSuccess && <Serie serie={serie}></Serie>}
    </div>
  );
 const { isLoading, error, data, isSuccess } = useQuery<SerieType[]>({
    queryKey: ["series"],
    queryFn: () => {
      console.log("fetchSeries");
      return fetch("http://localhost:3000/series").then((res) => res.json());
    },
  });

  const [selectdedSerie, setSelectdedSerie] = useState<SerieType | null>(null);

  const { data: serie, isSuccess: isSerieSuccess } = useQuery<SerieType>({
    queryKey: ["series", selectdedSerie?.id],
    queryFn: () => {
      return fetch(`http://localhost:3000/series/${selectdedSerie?.id}`).then(
        (res) => res.json()
      );
    },
    enabled: !!selectdedSerie,
  });
  const clickSerie = (serie: SerieType) => {
    setSelectdedSerie(serie);
  };
  if (!isSuccess) {
    return <p>pas de success</p>;
  }
  console.log(serie?.isFav); // works but the return doesn't have the right value
  return (
    <div className="App min-h-screen bg-slate-800 text-white ">
      <div className="grid grid-cols-5 gap-4">
        {data.map((serie) => (
          <Serie
            onClick={() => clickSerie(serie)}
            key={serie.id}
            serie={serie}
          ></Serie>
        ))}
      </div>
      {isSerieSuccess && <Serie serie={serie}></Serie>}
    </div>
  );
It works always but not on some cases (especially with first fav/unfav actions)
1 Reply
like-gold
like-gold•3y ago
This looks good to me, I can't spot any obvious issues. I would try to use the devtools to debug it further: https://tanstack.com/query/latest/docs/react/devtools One thing to look for is whether the queries are actually refetched after the mutation completes and if the network calls return what's expected (you can look at the browser's network tab to see the calls and whether they return what's expected).
Devtools | TanStack Query Docs
Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

Did you find this page helpful?