React useQuery not returning "data" on queryKey refetch

Question

I am trying to use useQuery to fetch data when a change is made to a state, a list of strings called validIds. The code is for a csv uploader which receives a list of ids and formats them into a list called formattedIds. Once this list is set in state, I want to trigger the useQuery which will send these ids and return the ids which are valid. If the request is successful I will save the returned ids in state now and create an invalid id list and return them to the user.

However, I have an issue getting into the if(isSuccess) statement in order to create these lists. Relevant code below:

  const [validIds, setValidIds] = useState<string[]>([]);
  
  const { data: people, isSuccess } = useQuery({
    queryKey: ["People", validIds],
    queryFn: () => getPeople(validIds),
    enabled: validIds.length > 0,
  });

  const addFormattedIds = (ids: string[]) => {
    setValidIds([]);
    const invalidIds: string[] = [];
    
    //Prior validation in order to get formattedIds, a list of strings
      setValidIds(formattedIds);
      if (isSuccess) {
        const returnedIds = people?.data.map((person) => person.id);
        const differences = formattedIds.filter((id) => !returnedIds.includes(id));
        invalidIds.concat(differences);
        setValidIds(returnedIds);
      }

      if (validIds.length < ids.length) {
        console.log(invalidIds);
      }
      setIdsEnteredAsCsv(validIds);
  };

When I call setValidIds(formattedIds), I see the request has been processed in the Network tab of the inspect window. However, the isSuccess statement does not pass so I cannot do anything with the returned data. In the same session, if I upload another csv of ids, it then goes into the if statement, but with the ids that I uploaded previosuly to this. How can I solve this, thanks. Please ask questions if necessary as perhaps I'm not using useQuery in the correct way.

You are using React Query wrong, when you change something from query keys, it will trigger refetch and after fetch is complete, it will trigger rerender, and these data will be available after rerender, therefore you cannot access them like you are trying, — Wraithy
– Wraithy, Commented Jan 11, 2024 at 13:35
Thanks, and then how do I access the data after rerender? Does that mean I don't require the isSuccess check at all? — Brian
– Brian, Commented Jan 11, 2024 at 13:41
you want to check if there is success to maybe do some conditional rendering, loading or something like that... you can access your data simply in component body like people?.data?.something, imagine that useQuery behave like useState, but on another machine... if it changes, it will rerender with diferent state — Wraithy
– Wraithy, Commented Jan 11, 2024 at 14:41

Swarup Bam · Accepted Answer · 2024-01-20 06:54:02Z

0

The API call to validate the IDs should be a POST call. You could do something like this then

const onValidationSuccess = (response) => {
// your post success functionality
}

 const mutation = useMutation({
    queryKey: ["People", validIds],
    mutationFn: (data) => getPeople(data),
    onSuccess:onValidationSuccess 
  });

  const addFormattedIds = (ids: string[]) => {;
    
    //Prior validation in order to get formattedIds, a list of strings
      mutation.mutate({})
  };

Also, check out https://tanstack.com/query/latest/docs/react/guides/mutations#consecutive-mutations

answered Jan 20, 2024 at 6:54

Swarup Bam

2092 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

React useQuery not returning "data" on queryKey refetch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related