Manual Cache Update | Dispatch function is not firing

[samislam]

I have the following API slice:

const mainApi = createApi({
  reducerPath: 'mainApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'http://localhost:3001/api/v1',
  }),
  tagTypes: ['$USER'],
  endpoints: (builder) => ({
    login: builder.mutation({
      query: ({ email, password }) => ({
        url: '/auth/login',
        method: 'POST',
        body: {
          email,
          password,
        },
        credentials: 'include',
      }),
      transformResponse: (res) => res.data,
      // invalidatesTags: ['$USER'],
      async onQueryStarted(payload, { dispatch, queryFulfilled }) {
        console.log('LOGIN QUERY STARTED');
        try {
          const { data: $USER } = await queryFulfilled;
          dispatch(
            mainApi.util.updateQueryData('getLoggedInUser', null, (draft) => {
              console.log('METHOD DISPATCH RAN!!');
              Object.assign(draft, $USER);
            })
          );
        } catch (err) {}
      },
    }),
    getLoggedInUser: builder.query({
      query: () => ({
        url: '/auth/logged-in-user',
        credentials: 'include',
      }),
      transformResponse: (res) => res.data,
      providesTags: ['$USER'],
    }),
  }),
});

and I have the following component which uses this API slice:
login.js

export default function Login() {
  const navigate = useNavigate()
  const [login, { isError, isSuccess, isLoading, error, data }] = useLoginMutation()

  useEffect(() => {
    switch (true) {
      case isError:
        console.log("ERROR!")
        break
      case isSuccess:
        console.log('SUCCESSFULY LOGGED IN!, userdata:', data)
        navigate('/', { replace: true })
    }
  }, [isError, isSuccess])

  const formSubmit = (e) => {
    e.preventDefault()
    const formData = new FormData(e.target)
    const email = formData.get('email')
    const password = formData.get('password')
    login({ email, password })
  }

  return (
    <form onSubmit={formSubmit}>
      <TextField name="email" type="email" required />
      <TextField name="password" type="password" required />
      <button type="subbmit">LOGIN</button>
    </form>
  )
}

when I input the email and the password on the front-end and click LOGIN I can successfully log in.

but it prints the following in the console:

LOGIN QUERY STARTED
SUCCESSFULY LOGGED IN!

but it does not print METHOD DISPATCH RAN!! which is causing other things in my app to fail, can you help me?

[phryneas]

Assuming you are calling that query without an arugment, it's undefined not null.

            mainApi.util.updateQueryData('getLoggedInUser', undefined, (draft) => {
              console.log('METHOD DISPATCH RAN!!');
              Object.assign(draft, $USER);
            })

and it will only update that data if it already was in cache.

[samislam]

Yes, this solved my problem. Thanks again phryneas. 🌹🌹🌹

[samislam]

one question, while I am updating the cache manually, it works, and it does not show "Loading", just the same way it's described in the docs, so everything looks okay.
But I noticed that even though it updates the UI immediately, it still sends a request to the back-end server,
is this the expected and default behavior of it?

[phryneas]

If you invalidate a tag that is you telling RTK Query to refetch that data. It doesn't care if you do one or a hundred manual cache updates on the side.