RTK query with Storybookjs

Question

I am using RTK query with typescript in my react application and its working fine however storybookjs is not able to mock data for RTK query.

I am trying to mock store object as shown in this storybook document.

example -

export const Test = Template.bind({});
Test.decorators = [
    (story) => <Mockstore data={myData}>{story()}</Mockstore>,
];
.
.
.
const customBaseQuery = (
    args,
    { signal, dispatch, getState },
    extraOptions
) => {
    return { data: [] }; // <--- NOT SURE ABOUT THIS
};


const Mockstore = ({ myData, children }) => (
    <Provider
        store={configureStore({
            reducer: {
                [myApi.reducerPath]: createApi({
                    reducerPath: 'myApi',
                    baseQuery: customBaseQuery,
                    endpoints: (builder) => ({
                        getMyData: myData, //<-- my mock data
                    }),
                }).reducer,
            },
            middleware: (getDefaultMiddleware) =>
                getDefaultMiddleware().concat(myApi.middleware),
        })}
    >
        {children}
    </Provider>
);

Since RTK query hook is autogenerated, I am not sure how to mock it in storybookjs. Instead of getting mock data storybook if trying to fetch actual data.

Please help me.

Answer 1

You'd do

                    endpoints: (builder) => ({
                        getMyData:  builder.query({ 
                          queryFn: () => { data: myData }, //<-- my mock data
                        })
                    }),

alternatively you could leave the store setup just as it is and use msw to mock the real api.