Adding headers to query throws Type Error: Cannot read properties of undefined (reading 'has')

[trevans24]

package.json:
"@reduxjs/toolkit": "^1.8.6",
"react-redux": "^8.0.4"

stack:
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/query/rtk-query.esm.js:1508:26
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/query/rtk-query.esm.js:1406:26
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/query/rtk-query.esm.js:1359:22
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/query/rtk-query.esm.js:1270:26
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/query/rtk-query.esm.js:1230:22
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/query/rtk-query.esm.js:1181:26
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/query/rtk-query.esm.js:1566:26
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/query/rtk-query.esm.js:1600:24
at eval (webpack-internal:///./node_modules/
reduxjs/toolkit/dist/redux-toolkit.esm.js:427:22
eval
webpack-internal:///./node_modules/redux-thunk/es/index.js:21:16

store.js

import { configureStore } from '@reduxjs/toolkit'

import { exploreApi } from 'ui/explore/exploreApi'

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

export default store

exploreApi:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import Session from 'services/session'

const HOST = process.env.NEXT_PUBLIC_YOU_API_HOST || 'http://localhost:8000'

export const exploreApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: `${HOST}`,
    prepareHeaders: (headers) => {
      headers.set('Accept', 'application/json')
      headers.set('X-Session-Id', new Session().get())
    }
  }),
  endpoints: ({ query }) => ({
    getNewestCards: query({
      providesTags: (res, err, id) => [{ id, type: 'cards' }],
      query: page => `/v2/cards/newest?take=${page * 12}` 
    })
  }),
  reducerPath: 'exploreApi',
  tagTypes: ['cards']
})

export const { useGetNewestCardsQuery } = exploreApi

Session:

class Session {
  constructor(sessionKey = 'sessionId') {
    this.key = sessionKey
  }

  save(v) {
    if (typeof window !== 'undefined') {
      const disk = localStorage

      if (disk) {
        disk.setItem(`@you:${this.key}`, JSON.stringify(v))
      }
    }
  }

  clear() {
    this.save(null)
  }

  get() {
    return this.sessionId || this.load()
  }

  load() {
    let data = null
    if (typeof window !== 'undefined') {
      const disk = localStorage

      if (disk) {
        try {
          this.sessionId = data = JSON.parse(disk.getItem(`@you:${this.key}`))
        } catch (e) {
          throw new Error()
        }
      }
    }
    return data
  }
}

export default Session

[markerikson]

I believe you need to return headers from inside of prepareHeaders():

• https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery

[trevans24]

Ah yes, dumb me... I looked at this over and over again. Thanks!!