Redux TypeError: Cannot destructure property 'merge' of 'definitions[meta.arg.endpointName]' as it is undefined.

[Ashlok2003]

Uncaught (in promise)



at @reduxjs_toolkit_query_react.js?v=086dfd1c:999:13
at updateQuerySubstateIfExists (@reduxjs_toolkit_query_react.js?v=086dfd1c:909:5)
at @reduxjs_toolkit_query_react.js?v=086dfd1c:995:9
at chunk-CMRBLURP.js?v=086dfd1c:2347:20
at Immer2.produce (chunk-CMRBLURP.js?v=086dfd1c:904:20)
at chunk-CMRBLURP.js?v=086dfd1c:2346:18
at Array.reduce ()
at reducer (chunk-CMRBLURP.js?v=086dfd1c:2327:25)
at reducer (chunk-CMRBLURP.js?v=086dfd1c:2752:16)
at combination (chunk-CMRBLURP.js?v=086dfd1c:302:31)

Can someone please help me to solve this error ?

Here is the Github repo link you can go through my codebase :- https://github.com/Ashlok2003/SOCIALX

Here is the codesandbox Link: https://codesandbox.io/p/github/Ashlok2003/SOCIALX/main

[phryneas]

If you have more than one api slice, you have to give them different reducerPath or they will overwrite each other.

That said, in 99% of all cases you should have only one api slice.

[einarq]

I guess I'm in the 1% 😄

I have a large app using RTK and RTKQ, and then within that app there is a whole module that gets federated out (webpack module federation), so that other apps can reuse that module.

In order to provide better separation and encapsulation I would like to move all the redux logic for that federated module into its own store. Which means that within the main app itself, the store for this module will be nested inside the store context.

Been trying to follow some examples from the docs.

It seems to work fine for the reducers, but the api part doesnt quite work it seems.
Initially I got some errors that seemed to indicate that the second api was mounted on the same store key (same reducerPath), but after changing the reducerPath to something I'm sure is unique I get errors that seem to indicate that the api is not mounted at all.

Warning: Middleware for RTK-Query API at reducerPath "fileLibraryQueries" has not been added to the store.
    You must add the middleware for RTK-Query to function correctly!

So I'm wondering if having two apis, that belong to individual stores, perhaps is not supported?
Does the useQuery hook some how look up the store on the context?
Do I need to provide the store instance to createApi or something?

Not the easiest repro to create (not OSS), but if you need a repro is there perhaps an example starting point you could point me to?

[phryneas]

If you have mutliple stores, you need to create an additional context to use for the second store, need to create new hooks for that second store context (see docs), and then create an individual createApi function that is bound to those hooks instead of the default ones - see https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/src/query/react/index.ts#L11-L14. The reactHooksModule can be called with alternative hooks and then bind to those.

[einarq]

Ah, I must have missed that last part with createApi. Is there a createCreateApi factory or something? Sorry, couldn’t quite tell from the link. On 30 Apr 2024, at 16:46, Lenz Weber-Tronic ***@***.***> wrote: If you have mutliple stores, you need to create an additional context to use for the second store, need to create new hooks for that second store context (see docs), and then create an individual createApi function that is bound to the hooks - see https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/src/query/react/index.ts#L11-L14. The reactHooksModule can be called with alternative hooks and then bind to those. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[einarq]

Or is buildCreateApi public? Sorry on the phone, will try later :) On 30 Apr 2024, at 17:05, Einar Paul Qvale ***@***.***> wrote:Ah, I must have missed that last part with createApi. Is there a createCreateApi factory or something? Sorry, couldn’t quite tell from the link. On 30 Apr 2024, at 16:46, Lenz Weber-Tronic ***@***.***> wrote: If you have mutliple stores, you need to create an additional context to use for the second store, need to create new hooks for that second store context (see docs), and then create an individual createApi function that is bound to the hooks - see https://github.com/reduxjs/redux-toolkit/blob/master/packages/toolkit/src/query/react/index.ts#L11-L14. The reactHooksModule can be called with alternative hooks and then bind to those. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[phryneas]

You'd end up doing something like

const createApi = buildCreateApi(
  coreModule(),
  reactHooksModule({
    hooks: {
      useDispatch,
      useSelector,
      useStore
    }
  }),
)

with your custom hooks.

buildCreateApi is public, it's how the angular integration is build.

[einarq]

One step further.

I've written it like this:

export const store = configureStore({
  reducer: {
    [fileLibraryQueries.reducerPath]: fileLibraryQueries.reducer,
    [browse.name]: browse.reducer,
    [upload.name]: upload.reducer,
    [copyTo.name]: copyTo.reducer,
    [createFolder.name]: createFolder.reducer,
    [renameFolder.name]: renameFolder.reducer,
  },
  middleware(getDefaultMiddleware) {
    return (
      getDefaultMiddleware({
        thunk: true,
      })
        // As per docs, needs to be the first middleware in case serializableCheck is enabled
        // .prepend(listenerMiddleware.middleware)
        .concat(fileLibraryQueries.middleware)
    );
  },
});

type AppStore = typeof store;
type AppDispatch = AppStore['dispatch'];
type RootState = ReturnType<AppStore['getState']>;

const context = createContext<ReactReduxContextValue | null>(null);
const useStore: () => AppStore = createStoreHook(context);
const useDispatch: () => AppDispatch = createDispatchHook(context);
const useSelector: TypedUseSelectorHook<RootState> = createSelectorHook(context);

export const createApi = buildCreateApi(
  coreModule(),
  reactHooksModule({
    hooks: {
      useDispatch,
      useSelector,
      useStore
    }
  }),
)

But now I get errors like this:

 error TS2741: Property 'withTypes' is missing in type '() => T
hunkDispatch<{ fileLibraryQueries: CombinedState<{ getFileLibraryOptions: QueryDefinition<OptionsQueryArg, BaseQueryFn<s
tring | CustomFetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, QueryTagTypes, Options, "fileLibraryQuer
ies">; ... 9 more ...; downloadFiles: MutationDefinition<...>; }, Quer...' but required in type 'UseDispatch<Dispatch<Un
knownAction>>'.

56       useDispatch,

[markerikson]

I suspect that's an artifact of how you're defining useDispatch as () => dispatch. We explicitly want "a function that matches the exact type of ReactRedux['useDispatch'], and as of v9.1, that is now a function that has a .withTypes() method included. Your type of () => dispatch doesn't have that.

Honestly you can either // @ts-ignore this error (it's just a slight types mismatch that won't matter at runtime), or alter how you're defining the useDispatch function above to match our latest recommendations.

[einarq]

Ok, following the approach from here. What’s the more correct way?Custom context in documents has a error in typescript · Issue #1565 · reduxjs/react-reduxgithub.comOn 30 Apr 2024, at 22:34, Mark Erikson ***@***.***> wrote: I suspect that's an artifact of how you're defining useDispatch as () => dispatch. We explicitly want "a function that matches the exact type of ReactRedux['useDispatch'], and as of v9.1, that is now a function that has a .withTypes() method included. Your type of () => dispatch doesn't have that. Honestly you can either // @ts-ignore this error (it's just a slight types mismatch that won't matter at runtime), or alter how you're defining the useDispatch function above to match our latest recommendations. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[einarq]

Thanks a lot.

This solves all the TS issues, but now I seem to be facing a similar issue, but from webpack.
This typically happens when there is a circular reference.

Any ideas on how to potentially better organize the code here?

[EskiMojo14]

your hooks and createApi would need to be in a different file
currently you're doing store -> apiSlice -> store
what you need is createApi -> apiSlice -> store

[einarq]

Is there an example anywhere? I can't quite seem to wrap my brain around it.

I need the hooks in order to call buildCreateApi, since I need to pass them in. And I cannot create the hooks without also having the types, like AppState etc. And I cannot get those types without also creating the store first.

Kind of all comes back to this perhaps?:

type AppStore = typeof store;

[EskiMojo14]

types can be imported from your store file into your hook file - they don't exist in runtime, so cannot cause circular imports

// hooks.ts
import { createContext, ReactNode } from "react";
import {
  ReactReduxContextValue,
  createDispatchHook,
  createSelectorHook,
  createStoreHook,
} from "react-redux";
import type { AppStore, RootState, AppDispatch } from "./store";

export const context = createContext<ReactReduxContextValue | null>(null);
export const useDispatch = createDispatchHook(context).withTypes<AppDispatch>();
export const useSelector = createSelectorHook(context).withTypes<RootState>();
export const useStore = createStoreHook(context).withTypes<AppStore>();

// api.ts
import type { createApi } from "@reduxjs/toolkit/query/react";
import {
  buildCreateApi,
  coreModule,
  reactHooksModule,
} from "@reduxjs/toolkit/query/react";
import { useDispatch, useSelector, useStore } from "./hooks";

export const createCustomApi: typeof createApi = buildCreateApi(
  coreModule(),
  reactHooksModule({
    hooks: {
      useDispatch,
      useSelector,
      useStore,
    },
  }),
);

// store.ts
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import { context } from "./hooks";

export const store = configureStore(...);

export function CustomProvider({ children }: { children: ReactNode }) {
  return (
    <Provider context={context} store={store}>
      {children}
    </Provider>
  );
}

export type AppStore = typeof store;
export type AppDispatch = AppStore["dispatch"];
export type RootState = ReturnType<AppStore["getState"]>;

[einarq]

Perfect! Thanks a lot, highly appreciated.