How can I use Apollo React hooks with Storybook?

Question

I'm working on a React project that uses Storybook to mock components. We recently introduced Apollo react hooks (i.e. useQuery) to fetch data for some components. Example:

const Component = () => {
  const { loading, error, data } = useQuery(GET_THING);
  if (loading) return 'Loading!';
  if (!loading && error) return 'Error!';
  return <ComponentChild data={data} />;
}

export default Component;

How can I mock up <Component /> in Storybook? The documentation I can find seems to rely on Apollo <Query /> components rather than hooks.

Or is the answer simply to move these data-fetching steps into parent "wrapper" components and only mock the child component? I'd rather not do that, because there are cases in which I'd like to mock a parent component that has, for example, a grandchild component with its own useQuery hook. Pulling all the downstream data-fetching into a wrapper way up in the component hierarchy feels like a violation of the principle that things should be as atomistic and modular as possible.

Answer 1

You can wrap your Component in a MockedProvider:

import { MockedProvider } from '@apollo/react-testing';

const mocks = [
  {
    request: {
      query: GET_THING,
    },
    result: {
      data: {
        yourData: { name: 'Storybook Data' },
      },
    },
  },
];

<MockedProvider mocks={mocks}>
    <Component />
</MockedProvider>,

See: https://www.apollographql.com/docs/react/development-testing/testing/#mockedprovider