What is difference between useQuery and initiate in RTK query?

Question

When we are inside the selector, in order not to violate the rules of hooks, we can use the RTK query endpoint as follows:

1)useQuery

  const data = datsApi.endpoints.getData.useQuery(someProps)

2)initiate

  const data = await dispatch(datsApi.endpoints.getData.initiate(someProps))
  const { data } = data

But what is the difference between them, and when is it better to use each of the examples

Krasnoff

Answer 1

initiate() is a Redux async thunk that triggers fetching data for that endpoint with that cache key argument.

The useQuery hooks automatically dispatch that thunk as needed when a component mounts or you change the cache key argument to the hook, and also contain a useSelector call to retrieve that cache entry's data for the component.

95% of the time, the useQuery hook is all you need.

The initiate() thunk is really only needed when you have to trigger a request outside of a component, or in some other imperative logic.

Hermeneutics

Answer 2

Redux provides us with thunk-middleware which allows us to dispatch thunk functions. Thunk functions always take dispatch and getState as arguments (additional args can also be configured).

So there are two cases here:

Case I: dispatching action objects

const actionObject = dispatch(actionObject)

By default, store.dispatch(action) returns the actual action object.

here

Case II: dispatching thunk functions

First thing you need to know is the difference between thunk functions and thunk action creators. Which is very well defined here, writing-thunks and a little snippet is:

// fetchTodoById is the "thunk action creator"
export function fetchTodoById(todoId) {
  // fetchTodoByIdThunk is the "thunk function"
  return async function fetchTodoByIdThunk(dispatch, getState) {
    const response = await client.get(`/fakeApi/todo/${todoId}`)
    dispatch(todosLoaded(response.todos))
  }
}

Now you have two choices, either dispatch the fetchTodoByIdThunk (but you can't in this case as it uses todoId but if it was defined statically with value in place of todoId, then you can dispatch it) using dispatch(fetchTodoByIdThunk) or dispatch fetchTodoById using dispatch(fetchTodoById()), it's the same but the latter can take arguments for further refining. The thunk middleware will take care of the intercepting this function passed to dispatch and will call this function with dispatch and getState as arguments.

What I found is that they use the word thunk for thunk action creators. You can see it just after the above snippet on writing thunks (see the title of next snippet). From all this info, the only thing I came up with is datsApi.endpoints.getData.initiate returns a thunk action creator, which when called return the thunk function, which is then dispatched.

Hyperthermia