apollo-storybook-decorator icon indicating copy to clipboard operation
apollo-storybook-decorator copied to clipboard

[Help Wanted] Package does not work for me :(

Open noobling opened this issue 5 years ago • 2 comments
trafficstars

Test code

import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import apolloStorybookDecorator from 'apollo-storybook-react';
import React from 'react';
import MyComp from '.';

export const actions = {
  onCancelClick: action('onCancelClick'),
};

export const props = {
  _id: 'jifjewoi',
};

const typeDefs = `
  type MessageGroup {
    _id: String
  }
  type Query {
    findMessageGroup: [MessageGroup]
  }

  schema {
    query: Query
  }
`;

const mocks = {
  Query: () => {
    return {
      findMessageGroup: () => {
        return ['abc', 'def'];
      },
    };
  },
};

storiesOf('molecules/MyComp', module)
  .addDecorator(apolloStorybookDecorator({ typeDefs, mocks }))
  .add('default', () => <MyComp someProp='value' />);

My Comp

<div>
  ...
  some code
  ...

  <ComponentWithUseQuery />
</div>

Error

image

Any help appreciated

noobling avatar Jan 13 '20 07:01 noobling

I faced the same problem and I resolved it by explictly passing Provider in plugin options in Storybook config.js file:

import { ApolloProvider } from "@apollo/react-hooks";
addDecorator(
  apolloStorybookDecorator({
    typeDefs: schema,
    mocks,
    Provider: ApolloProvider,
  }),
);

goooseman avatar Feb 29 '20 05:02 goooseman

Worked for me, thank you @goooseman. Not quite sure as to why you need to specify a hooks provider, shouldn't the package by default set this up?

j-edward avatar May 01 '20 13:05 j-edward