CODEWITHSUNDEEP
javascriptreduxredux-toolkitrtk-query
Nicolas Popy
Nicolas Popy

Reputation: 51

Cannot read property 'providesTags' of undefined

I'm using RTK query to get one record via api via "useGetUserQuery"

Api Call is ok because backend have result. I use sequelize and my result send data object. I tried to erase providestags but i have the same issue.

My front-end return this error :

rtk-query.esm.js:771 Uncaught (in promise) TypeError: Cannot read property 'providesTags' of undefined
at calculateProvidedByThunk (rtk-query.esm.js:771)
at rtk-query.esm.js:908
at redux-toolkit.esm.js:603
at produce (immer.esm.js:1)
at redux-toolkit.esm.js:602
at Array.reduce (<anonymous>)
at redux-toolkit.esm.js:581
at combination (redux.js:528)
at reducer (rtk-query.esm.js:992)
at combination (redux.js:528)
at computeNextEntry (<anonymous>:3395:21)
at recomputeStates (<anonymous>:3429:17)
at <anonymous>:3809:22
at Object.dispatch (redux.js:288)
at dispatch (<anonymous>:3856:17)
at rtk-query.esm.js:1326
...
at rtk-query.esm.js:1418
at redux-toolkit.esm.js:386
at index.js:11
at redux-toolkit.esm.js:314
at dispatch (redux.js:659)
at redux-toolkit.esm.js:1144
at step (redux-toolkit.esm.js:38)
at Object.next (redux-toolkit.esm.js:19)
at fulfilled (redux-toolkit.esm.js:72)

My code with RTK query is here :

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import Cookie from 'js-cookie';
import React from 'react';

export interface User {
   id: string
   login: string
   password: string
   fonction: string
   imageprofil: string  
   ...
}
React.useLayoutEffect = React.useEffect
type UsersResponse = User[]

export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080/api/',
    prepareHeaders: (headers) => {
        const token = Cookie.get('token');   
        if (token) {
            headers.set('authorization', `Bearer ${token}`)
        }
        return headers
    }, 

}),
 tagTypes: 'User',

endpoints: (build) => ({

getUser: build.query<User, string>({
    query: (id) => ({url:'users/'+id}),
    providesTags: 'User',        
}),    
}),
}),
})

 export const {         
     useGetUserQuery        
 } = api

Upvotes: 1

Views: 6234

Answers (4)

Kasra
Kasra

Reputation: 2189

My mistake was: I was using the same reducerPath more than one time. (this is why you should not do ctr+c, ctr+v)

Upvotes: 0

Mahmoud Ahmed
Mahmoud Ahmed

Reputation: 29

https://redux-toolkit.js.org/api/getDefaultMiddleware

Included Default Middleware

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: myCustomApiService,
      },
      serializableCheck: false,
    }),
})

Upvotes: 0

Nicolas Popy
Nicolas Popy

Reputation: 51

Maybe i found thanks @phry !

My configurestore was not ok.

Before

import { configureStore } from '@reduxjs/toolkit'
import { api } from '../features/post/post_api.ts'



export const store = configureStore({
   reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
})

After

import { configureStore } from '@reduxjs/toolkit'
import { api } from '../features/post/post_api.ts'
import {userapi} from '../features/user/user_api.ts'



export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
    [userapi.reducerPath]: userapi.reducer
  },
  // adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
})

Upvotes: 3

phry
phry

Reputation: 44276

For one, it should be tagTypes: ['User'],, but that's probably not your problem here.

I would assume that your reducer is not mounted at [api.reducerPath] or you have multiple apis (btw. you should only ever have one except in ultra-rare edge cases!) that are all mounted on the same key because you did not specify differing reducerPaths for them - thus overwriting each other.

Upvotes: 7

Related Questions