使用React-Apollo设置React-Storybooks

Question

有没有办法将React-Apollo与React-Storybooks一起使用？之前我正在尝试使用Relay,并且有一个模块(https://github.com/orta/react-storybooks-relay-container)允许创建不需要网络访问但使用静态数据的存根容器.

是否有React-Apollo框架的等价物？http://dev.apollodata.com/react/

FWIW我正在使用React-Native但是一切背后的想法和设置应该非常相似(例如我使用https://github.com/storybooks/react-native-storybook而不是基于Web的解决方案)

Answer 1

嗯,这是一个相当古老的问题,但我会在这里为任何需要答案的开发伙伴发布答案.如果这对某人有好处,请不要清楚,请告诉我,我会更新我的答案

为了使工作(react-apollo和react-storybook),你必须从我最喜欢的将是使用多种方法MockedProvider从react-apollo你基本上想要做的是告诉你的用户界面,每当预期请求被解雇它应该响应与预期的响应,让我们使用<Avatar>需要正确呈现用户数据的组件来创建示例:

Avatar.js

class Avatar {
   // ...
   render() {
       // pretty avatar layout
   }
}

export const COLLABORATOR_QUERY = gql`
  query GetCollaborator($id: ID!) {
    Collaborator(id: $id) {
      id
      firstName
      lastName
      avatarImgUrl
    }
  }
`;

const AvatarWithData = graphql(
  COLLABORATOR_QUERY, {
    options: {
      variables: {
        // let's suppose that we got a static variable here to simplify the example
        id: '1'
      }
    }
  }
)(Avatar);

export default AvatarWithData;

.stories/index.js

import { addTypenameToDocument } from 'apollo-client/queries/queryTransform';
import { MockedProvider } from 'react-apollo/lib/test-utils';
import { COLLABORATOR_QUERY } from '../js/components/Avatar';
import Avatar from '../js/components/Avatar';

const mockedData = {
  Collaborator: {
    id: '1',
    firstName: 'Char',
    lastName: 'Mander',
    avatarImgUrl: 'https://img.pokemondb.net/artwork/charmander.jpg',
    __typename: 'Collaborator'
  }
};

const query = addTypenameToDocument(USER_QUERY);
const variables = { id: '1' };
let mocks = [{ request: { query, variables }, result: { data: mockedData } }];

storiesOf('Mocked', module)
  .addDecorator((story) => (
      <MockedProvider mocks={mocks}>
         {story()}
      </MockedProvider>
  )).add('Avatar', () => {
      return (<Avatar />);
  });

我有这个addTypenameToDocument导入的一些问题导致他们使用打字稿和我的样板文件create-react-app有一些错误,但我所做的是在我的项目中包含该文件中的逻辑(非常脏,对不起).

更新:为了避免导入问题导入addTypenameToDocument我正在使用的create-react-project是运行eject命令并将以下内容添加到package.jsonjest配置:

"transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\](?!(apollo-client)/).+\\.(js|jsx)$"]

问题是这些人在apollo-client他们的构建文件中有es6并且你会得到语法错误,除此之外,如果你使用的是反应故事书,你可能想要将这个配置添加到故事书的webpack配置中.

在做之前我已经发现了这个:https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead#.1um2z7abl在测试部分也有一个很好的方法(几乎相同)但他们没有使用addTypenameToDocument我还没有尝试自己但如果它工作,你将能够测试没有运行react-create-project的eject命令

除此之外,您应该确保您的查询和变量与UI组件的请求完全匹配,否则您将收到未经模拟的错误,然后您就可以开始滚动了.