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），我很少有方法可以从react-apollo使用MockedProvider您基本上想要的内容做的是告诉你的UI，无论何时发出预期的请求，它都应该响应预期的响应，所以让我们使用需要用户数据正确呈现的组件<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导入的一些问题，因为他们使用的是typescript，而我的样板文件create-react-app出现了问题，但我所做的就是在我的项目中包含该文件中的逻辑（很脏，对不起那个。）

更新：为了避免导入问题addTypenameToDocument 我在使用create-react-project时所执行的操作是运行eject命令并将以下内容添加到{ {1}} jest配置：

package.json

问题是"transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\](?!(apollo-client)/).+\\.(js|jsx)$"]的人在他们的构建文件中有es6并且你会得到语法错误，除此之外，如果你使用的是反应故事书，你可能想要添加this配置故事书的webpack配置。

在完成所有这些之前我在测试部分找到了这个：https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead#.1um2z7abl也有一个很好的方法（几乎相同），但他们没有使用{{1}我还没有尝试过自己，但是如果它有效，你将能够在不运行react-create-project的弹出命令的情况下进行测试

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

使用React-Apollo设置React-Storybooks

1 个答案: