Manual query refetching using new query parameters

[denisborovikov]

I'm using a RQ with xstate.

const profile = useGetProfile({ userId: '123'} , { enabled: false })

  const [state, send] = useMachine(machine, {
    services: {
      async getProfile() {
        const response = await profile.refetch()
        return response.data
      },
    },
  })

It works perfectly until we need to pass query parameters that are not available outside of the useMachine hook.

I'm wondering if it's possible to refetch the existing query using different query parameters. Something like this (but it doesn't work now).

const response = await profile.refetch({ userId: '000'})

Is there a way to pass query parameters to the query function in an imperative, more like a mutation way?

The full example would look like this (note of using event)

const profile = useGetProfile({ userId: '123'} , { enabled: false })

  const [state, send] = useMachine(machine, {
    services: {
      async getProfile(context, event) {
        const response = await profile.refetch({ userId: event.userId })
        return response.data
      },
    },
  })

For those who are interested in using xstate and RQ together, here's another discussion statelyai/xstate#1813

[TkDodo]

There is no such thing because queries should be cached by their parameters, and to do that, you'd have to make them part of the queryKey. So the idiomatic way to do this is described here:

https://tanstack.com/query/v4/docs/guides/disabling-queries#lazy-queries

I don't know how to keep the machine "in sync" with state that it doesn't really own. There is an input proposal on xstate that would solve the problem nicely but I don't think it will get merged in the current way:

• Implemented input statelyai/xstate#2779

There is even an example in there on how to use it with useQuery:

const Component = (props) => {
  const [result] = useQuery();

  const [state, send] = useMachine(machine, {
    input: {
      // props.id and result.data will be kept up to date
      // in the machine above
      id: props.id,
      data: result.data
    }
  });
};

I like this because it doesn't need to disable the query, so it will profit from all the automatic things that react-query does and you could use the idiomatic way to just change the queryKey when the userId changes. If you want to trigger a refetch from within the machine, you can always use queryClient.invalidateQueries, or you pass the refetch method to input as well.

---

one workaround I recently found is to use refs and pass them as meta, but I find this approach to be pretty meh:

const idRef = useRef('123')
const profile = useQuery(
  ['user'],
  ({ meta }) => fetchUser({ userId: meta.userId.current }),
  { enabled: false, meta: { userId: idRef } }
)

const [state, send] = useMachine(machine, {
  services: {
    async getProfile(context, event) {
      idRef.current = event.userId
      const response = await profile.refetch()
      return response.data
    },
  },
})

[denisborovikov]

Hi Dominik, thanks for the detailed explanation! I wonder how you have time to reply to everyone on GitHub/Twitter/discord, etc., with such rich details. Appreciate it!

The input seems like an interesting proposal, but unfortunately, it hasn't been merged yet. I'll definitely keep an eye on it. I don't like the ref approach either. It's more like an escape hatch. It breaks the beauty of using xstate, where everything is clear and predictable.

Anyway, thank you again for the extended reply. I'll keep looking in this direction. At least I got the confirmation from the RQ side that I'm not missing anything obvious.