Asynchronous APIs

[onlyanegg]

I'm working with an asynchronous api. I'll run a mutation to create a resource, the server will return a job id, and then I'll have to poll until the job is complete, at which point the job endpoint will return the id of the resource.

I'm wondering if there's an idiomatic way to handle this in react-query. Currently, what seems to fit best is to manually poll the job endpoint within the mutation and then just return the resource id. Something like the following. Should I be doing something else?

const useCreateResource = () => {
  return useMutation({
    mutationFn: async () => {
      const { jobId } = await api.createResource()

      let response
      for (const _ in range(5)) {
        response = await api.getJobStatus()

        if (response.isDone) {
          break
        }

        await sleep(1000)
      }

      if (!response.isDone) {
        throw new TimeoutError()
      }

      return response.resourceId
    }
  })
}

[TkDodo]

fire the mutation, then setup a query with refetchInterval that only starts after the mutation has finished. refetchInterval can be a function that receives the query so you can check for isDone and return false to stop polling after the job is done.

[onlyanegg]

Ok, thanks. So maybe something like this?

const component = () => {
  const mutation = useMutation(...)
  const query = useQuery({
    queryKey: ['query', {jobId: mutation.data?.jobId}],
    enabled: mutation.isSuccess,
    refetchInterval: (data) => {
      if (data.isDone) {
        return false
      }
      return 1000 // ms?
    }
  })

  const handlePress = () => {
    mutation.mutate()
  }

  return (
    <>
      <button onPress={handlePress} />
      <DataDisplay data={query.data} />
    </>
  )
}

[TkDodo]

looks great