reactjs - Usar mutación de Redux-Toolkit con createAsyncThunk

Quiero crear una llamada a la API de inicio de sesión desde el slice de autenticación. Uso tanto Redux-Toolkit (RTK) como RTK Query en el proyecto. Quiero usar fetchBaseQuery en la llamada a la API. Tengo baseQuery predefinido.

export const baseQuery = retry(fetchBaseQuery({
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
    'Access-Control-Allow-Origin': '*',
  },
  prepareHeaders: (headers, { getState }) => {
    const accessToken = localStorage.getItem(AUTH_TOKEN_KEY) || '';
    const uid = getLocal(UID_KEY);
    if (accessToken) {
      headers.set('Authorization', accessToken);
      headers.set(UID_KEY, uid);
    }
    return headers;
  },
}), { maxRetries: 3 });

Mi expectativa es usar una mutación de RTK en el authSlice. He intentado de esta manera, pero no está funcionando.

export const loginAsync = createAsyncThunk(
  'auth/login',
  async (credentials: LoginValuesType, thunkAPI) => {
    try {
      // How to call the mutation here?
      // const response = await userApi.useLoginMutation(credentials)
    
      if (response?.data?.code === 0) {
        localStorage.setItem(AUTH_TOKEN_KEY, response.data?.data?.token);
        setLocal('uid', response.data?.data?.uid);
        return response.data;
      } else if (response?.data?.code === 1) {
        thunkAPI.dispatch(showError(response?.data?.msg))
        return thunkAPI.rejectWithValue({msg: response?.data?.msg})
      }
    } catch (e) {
      thunkAPI.dispatch(showError('An error occurred'))
      return thunkAPI.rejectWithValue({msg: "An error occurred"})
    }
  }
)

Si este método es imposible, por favor sugiéreme una buena manera de crear esta conexión de backend.

Esta es la mutación RTK que he implementado. Podemos eliminarla si no es necesaria.

export const userApi = createApi({
  reducerPath: 'userApi',
  baseQuery: baseQuery,
  endpoints: (builder) => ({       
    login: builder.mutation({
      query: (args) => {
        return {
          url: '/api/v1/sign_in',
          method: 'POST',
          body: args,
        }
      },
    }),
  }),
});

export const {
  useLoginMutation
} = userApi;

Respuesta #1

Puedes iniciar un endpoint directamente. Ejemplo:

export const loginAsync = createAsyncThunk(
  'auth/login',
  async (credentials: LoginValuesType, thunkApi) => {
    try {
      const { data } = await thunkApi.dispatch(
        userApi.endpoints.login.initiate(credentials);
      );
    
      if (data.code === 0) {
        localStorage.setItem(AUTH_TOKEN_KEY, data.data?.token);
        setLocal('uid', data.data?.uid);
        return data;
      } else if (data.code === 1) {
        const { msg } = data;
        thunkApi.dispatch(showError(msg));
        return thunkApi.rejectWithValue({ msg });
      }
    } catch (e) {
      thunkApi.dispatch(showError('An error occurred'));
      return thunkApi.rejectWithValue({ msg: "An error occurred" });
    }
  }
);