CODEWITHSUNDEEP
javascriptreactjsredux-toolkitrtk-query
signed digital
signed digital

Reputation: 13

Logging within createApi redux-toolkit

I am wondering how I can add a console.log with in

export const pokemonApi = createApi({
  reducerPath: 'pokemonApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
  endpoints: (builder) => ({
  getPokemonByName: builder.query<Pokemon, string>({
   query: (name) => `pokemon/${name}`,
    }),
  }),
})

So that when a component calls getPokemonByName, it should console.log('Hello I am here!')

I have tried below but does not work and has compile error..

  getPokemonByName: builder.query<Pokemon, string>({
   query: (name) => {`pokemon/${name}`, **console.log('Hello I am here!')**}
    }),

There are no examples of this on https://redux-toolkit.js.org/rtk-query/api/createApi

I want to do this because my component is trying to call this method but I am not sure whether it even gets here!

Upvotes: 1

Views: 1552

Answers (2)

Ahmed Ahmed Sayed
Ahmed Ahmed Sayed

Reputation: 205

Observing that the action payload of redux will appear as below

{"type":"api/executeMutation/rejected","payload":{"status":"FETCH_ERROR","error":"TypeError: Network request failed"},"meta":{"baseQueryMeta":{"request":{"url":"http://localhost:4000/checkUserExist","credentials":"same-origin","headers":{"map":{"authorization":"","x-gapi-key":"xxxx-xx-xx-xxx-xxxx","content-type":"application/json"}},"method":"POST","mode":null,"signal":{},"referrer":null,"bodyUsed":false,"_bodyInit":"{\"Email\":\"[email protected]\",\"PhoneNumber\":\"+xxxx\"}","_bodyText":"{\"Email\":\"[email protected]\",\"PhoneNumber\":\"+xxx\"}"}},"RTK_autoBatch":true,"arg":{"type":"mutation","endpointName":"checkUserExists","originalArgs":{"Email":"[email protected]","PhoneNumber":"+xxxx"},"track":true},"requestId":"FJke5ZaW-BYUdhRysxi98","rejectedWithValue":true,"requestStatus":"rejected","aborted":false,"condition":false},"error":{"message":"Rejected"}}

So you can access it your middleware as below

export const rtkQueryErrorLogger: Middleware =
  (api: MiddlewareAPI) => (next) => (action) => {
    console.log("RTK STrt-------------------R STrt");
    // console.log(
    //   {
    //     action: JSON.stringify(action),
    //     isPending: isPending(action),
    //     isRejected: isRejected(action),
    //     isRejectedWithValue: isRejectedWithValue(action),
    //   },
    //   "\n"
    // );
    if (action?.meta?.baseQueryMeta?.request)
      console.log(
        "API Request data",
        JSON.stringify({
          data: action?.meta?.baseQueryMeta?.request,
        })
      );

Upvotes: 0

phry
phry

Reputation: 44226

It would be

  getPokemonByName: builder.query<Pokemon, string>({
   query: (name) => {
       console.log('Hello I am here!')
       return `pokemon/${name}`
     },
   }),

But you probably rather should use the Redux Devtools.

There is a new alpha of the Redux Devtools that has even support for RTK Query: https://chrome.google.com/webstore/detail/redux-devtools-next/oamphgegmigmlgkdnijmeomjenbmkbdg

Upvotes: 4

Related Questions