4

有什么方法可以将 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 的解决方案）

4

1 回答 1

8

好吧，这是一个很老的问题，但我会在这里为任何需要答案的开发合作伙伴发布答案。如果这对某人有好处并且还不够清楚，请告诉我，我会更新我的答案

为了使它工作（react-apollo和react-storybook）你有几个方法，我最喜欢使用MockedProvider你react-apollo基本上想要做的就是告诉你的用户界面，每当一个预期的请求被触发时，它应该以预期的响应响应，所以让我们使用<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，你会得到语法错误，最重要的是，如果你使用 react storybook，你可能希望将此配置添加到 storybook 的 webpack 配置中。

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

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

于 2017-02-23T15:56:04.537 回答