React query with Storybook
hi guys. how do i show the mock data on the storybook. i already wrap the preview.tsx with ReactQueryProvider.
// components/HubSelector.tsx
const HubSelector = () => {
const {data,isLoading} = useQuery(['hubs'], getHubs)
if(isLoading) return Loading...
return <ul>
{data.map(item => <li key={item}>{item}</li>)}
</ul>
}
// components/HubSelector.stories.tsx
import { Center } from "@mantine/core";
import { Meta, Story } from "@storybook/react";
import { HubSelector } from "./HubSelector";
const meta: Meta = {
title: "Elements/HubSelector",
component: HubSelector,
};
export default meta;
const Template: Story = () => <HubSelector/>
export const Default = Template.bind({});
2 Replies
absent-sapphire•4y ago
well the request likely won't work in storybook, so you'll have to mock it somehow.
msw is a good tool to do that imo
you can also put some mock data in the queryCache with queryClient.setQueryData and then set a staleTime so that this data is considered fresh.flat-fuchsiaOP•4y ago
Thank you