Manually triggering useQuery from useEffect

Question

My app has a modal with a few buttons. When the buttons are clicked, calls are made to the server, which work as expected. However, the screen does not refresh with the changes and I can't figure out how to make it work. I think I need to update the data, which will cause the components to render again, which is why I'm trying to use refetch. FYI - I found this, which helps a lot, but I'm not sure what's wrong with my implementation.

...
import { GetData } from '../../Api/GetData';
...

export const Timeline = ({props}) => {
  const [refresh, setRefresh] = useState(true)

  const {isLoading, isSuccess, data, refetch} = useQuery("key",
    GetData({name: props.name, period: props.period}), {
    staleTime: Infinity,
    enabled: false
  })

  useEffect(() => {
    if(refresh) {
      setRefresh(false)
      refetch()
    }
  }, [refresh, refetch]) // refresh is set to true by child components

  if(isLoading) ...
}

export const GetData = async (params) => {
  const baseUrl = process.env.REACT_APP_ESPO_BASE_URL
  const url = "https://..."
  
  const headers = {"X-Api-Key": process.env.REACT_APP_API_KEY}

  const response = await fetch(url, {method: "GET", headers: headers})
  return response.json()
}

Any help would be greatly appreciated.

From what I can see, your query depends on props.name and props.period so you might want to add them to the queryKey array as dependencies. That way, whenever one of those values change, your query will automatically update. You will need to set enabled to true though. — ivanatias
– ivanatias, Commented Oct 1, 2022 at 18:53
It needs to be manually triggered, which is why the props are not part of the key. I'll remove all of that since it is not part of the question. — Anthony
– Anthony, Commented Oct 1, 2022 at 18:56
Have you checked on react query's dev tools? maybe you can get a hint of what's happening. — ivanatias
– ivanatias, Commented Oct 1, 2022 at 19:01
By the way, are you using react-query v4? If so, all keys need to be arrays since it seems react-query no longer automatically convert them to arrays (['key']). — ivanatias
– ivanatias, Commented Oct 1, 2022 at 19:12
I am using 3.39.x. Thanks for the pointer because I was about to upgrade to 4.x. Regarding your other question, I am not sure what is happening. I think this is based on my misunderstanding of how components are rendered. I'll do some more digging. Thanks for the help. — Anthony
– Anthony, Commented Oct 3, 2022 at 17:01

possum · Accepted Answer · 2022-10-01 19:29:36Z

1

Your problem is that you're executing GetData when you set up useQuery rather than passing in a function. You can improve this by changing your useQuery call to something like

const {isLoading, isSuccess, data, refetch} = useQuery("key",
    () => GetData({name: props.name, period: props.period}), {
    staleTime: Infinity,
    enabled: false
  })

answered Oct 1, 2022 at 19:29

possum

2,9667 gold badges19 silver badges24 bronze badges

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

1 Comment

Anthony Over a year ago

I see. Thanks for the help. Would you recommend a different way to run the query other than using refetch?

Collectives™ on Stack Overflow

Manually triggering useQuery from useEffect

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related