xenophobic-harlequin

Getting the same 1st old data when trying to fetch data using useQuery in a .map() method.

Parent component
------------------------

{userDoodlesData.map((doodle: any) => (
 <Fragment key={doodle._id}>
  {isDoodleModal ? (
   <DoodleIdPage
    setIsDoodleModal={setIsDoodleModal}
    userData={userData}
    doodleId={doodle._id}
   />
  ) : null}
 </Fragment>
))}

------------------------
Child component
------------------------

const {
 doodleWithCommentsData,
 doodleWithCommentsIsLoading,
 doodleWithCommentsIsError,
} = useFetchDoodleWithAllComments(doodleId);

if (doodleWithCommentsIsLoading) return <LoaderSpinner />;
if (doodleWithCommentsIsError) return <>Error!</>;

------------------------
My React Query Hook
------------------------

const useFetchDoodleWithAllComments = (doodleId: string) => {

 const {
  data: doodleWithCommentsData,
  isLoading: doodleWithCommentsIsLoading,
  isError: doodleWithCommentsIsError,
 } = useQuery(['doodleWithComments'], async () => {
  try {
   const response = await fetch(`/api/doodle-with-all-comments/${doodleId}`);
   return response.json();
  } catch (error) {
   throw error;
  }
 });

 return {
  doodleWithCommentsData,
  doodleWithCommentsIsLoading,
  doodleWithCommentsIsError,
 };

};

export default useFetchDoodleWithAllComments;

Parent component
------------------------

{userDoodlesData.map((doodle: any) => (
 <Fragment key={doodle._id}>
  {isDoodleModal ? (
   <DoodleIdPage
    setIsDoodleModal={setIsDoodleModal}
    userData={userData}
    doodleId={doodle._id}
   />
  ) : null}
 </Fragment>
))}

------------------------
Child component
------------------------

const {
 doodleWithCommentsData,
 doodleWithCommentsIsLoading,
 doodleWithCommentsIsError,
} = useFetchDoodleWithAllComments(doodleId);

if (doodleWithCommentsIsLoading) return <LoaderSpinner />;
if (doodleWithCommentsIsError) return <>Error!</>;

------------------------
My React Query Hook
------------------------

const useFetchDoodleWithAllComments = (doodleId: string) => {

 const {
  data: doodleWithCommentsData,
  isLoading: doodleWithCommentsIsLoading,
  isError: doodleWithCommentsIsError,
 } = useQuery(['doodleWithComments'], async () => {
  try {
   const response = await fetch(`/api/doodle-with-all-comments/${doodleId}`);
   return response.json();
  } catch (error) {
   throw error;
  }
 });

 return {
  doodleWithCommentsData,
  doodleWithCommentsIsLoading,
  doodleWithCommentsIsError,
 };

};

export default useFetchDoodleWithAllComments;

I think it's caching the 1st set of data from the 1st doodleId, but it's not replacing that cache for the next ones.

9 Replies

evident-indigo•3y ago

You may want to add the doodleId into the query keys since it caches the data using the keys.

useQuery(
  ["doodleWithComments", doodleId ],
  async () => ///
)

useQuery(
  ["doodleWithComments", doodleId ],
  async () => ///
)

xenophobic-harlequinOP•3y ago

Added it, but didn't work :(. I've tried using refetch() in a useEffect in the child component modal but it just replaced the initial cache with the data from the last doodleId cache.

evident-indigo•3y ago

Hmm then I'd say I'm stumped on this as well. What I am sure of is that react-query caches the data using the query-keys and using useQuery(['doodleWithComments']) would increase the likelihood of stale data being shown. If you've added the doodleId into it useQuery(['doodWithComments', doodleId]), I'd give it a Ctrl+R refresh before either adding refetchOnMount='always' or creating a simplified repo and submitting it as a bug to the team.

useQuery(
  ['doodleWithComments', doodleId],
  async() => {
  // fetching
  },
  { refetchOnMount: 'always' }
);

useQuery(
  ['doodleWithComments', doodleId],
  async() => {
  // fetching
  },
  { refetchOnMount: 'always' }
);

xenophobic-harlequinOP•3y ago

Ok ty for replying! I'll mess around with it more

evident-indigo•3y ago

Re-reading this, I just want to make clear that the doodleId being added into the query-keys must the variable of the doodle id and NOT a string ["doodleWithComments","doodleId]"

xenophobic-harlequinOP•3y ago

It should be the unique object id from mongo, the object id's are being passed correctly to the modal when I tested with console.log. I feel like I'm missing something obvious..

xenophobic-harlequinOP•3y ago

devtools is showing them with unique keys, but I'm stumped. I think I'll just refactor how I'm going to display the data to get around this hump.

environmental-rose•3y ago

Could you setup a reproduction codesandbox for further analysis ?

xenophobic-harlequinOP•3y ago

Srry i eventually solved it by moving the ternary with the modal outside of the map and passing the individual doodlids using a handle click function. It was passing all the doodle ids all at once in each .map element to the modal for some reason.

Gaming

Programming

Getting the same 1st old data when trying to fetch data using useQuery in a .map() method.

Did you find this page helpful?