T
TanStack•2y ago
fascinating-indigo

hi friends, please help me with this

I was building a movies web app using react and tmdb api and I have a page called Movies.jsx where all movies are fetched using react query and that's works fine and I also have movieInfo.jsx page that responsible for showing details of a specific movie based on id in url (movie/1233) and i grab that id using also react query the problem here is when I open a movie and go back to movies list and then open another one the movieInfo page shows the previous movie data but after some seconds it's re rendering the ui and show the one I clicked on, how to solve this issue so the previous movie info will not show after clicking different movie ? Im new to react query, Thanks Trying to fetch data using react query
3 Replies
fascinating-indigo
fascinating-indigoOP•2y ago
const { movieId } = useParams(); const { data: movieInfo, isLoading } = useQuery({ queryKey: ["movieInfo"], queryFn: () => getMovieInfoById(movieId), onError: (err) => console.log(err), });
like-gold
like-gold•2y ago
Id in key
optimistic-gold
optimistic-gold•2y ago
Give this a go (add the movieId to the key for your query): 
const { movieId } = useParams();
  const { data: movieInfo, isLoading } = useQuery({
    queryKey: ["movieInfo", movieId],
    queryFn: () => getMovieInfoById(movieId),
    onError: (err) => console.log(err),
  });
const { movieId } = useParams();
  const { data: movieInfo, isLoading } = useQuery({
    queryKey: ["movieInfo", movieId],
    queryFn: () => getMovieInfoById(movieId),
    onError: (err) => console.log(err),
  });
I've always kind of treated the query key like the dependency array for a useEffect - if you want to pick up the state changes, within the queryFn, then it needs to be in the key.

Did you find this page helpful?