基于Storybookjs的RTK查询

Question

我在我的react应用程序中使用了带有类型记录的RTK查询，它工作得很好，但是故事书无法模拟RTK查询的数据。

我试图模拟存储对象，如这个故事书文档所示。

例子-

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>
);

由于RTK查询钩子是自动生成的，我不知道如何在故事书中模拟它。如果试图获取实际数据，而不是获取模拟数据故事簿。

请帮帮我。

Answer 1

你会这么做

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

或者，您可以保留商店设置，并使用msw来模拟真正的api。