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({});
// 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({});
