使用 React-Apollo 设置 React-Storybook

Posted 2023-03-08

【中文标题】使用 React-Apollo 设置 React-Storybook

【英文标题】：Setup React-Storybooks with React-Apollo

【发布时间】：2017-03-22 10:30:31

【问题描述】：

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

【参考方案1】：

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

为了使其正常工作（react-apollo 和 react-storybook），我最喜欢使用 MockedProvider 和 react-apollo 的方法很少，您基本上想要做的是告诉您的 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 导入的一些问题，因为他们使用打字稿，而我的样板 create-react-app 有问题，但我所做的是在我的项目中包含该文件中的逻辑（非常脏，对不起）。

更新：为避免导入 addTypenameToDocument 出现问题，我在使用 create-react-project 时所做的是运行 eject 命令并将以下内容添加到 package.json jest 配置中：

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

问题是apollo-client 的人在他们构建的文件中有 es6，你会得到语法错误，最重要的是，如果你使用 react 故事书，你可能想将 this 配置添加到 webpack 配置中故事书。

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

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

【讨论】：

谢谢！总是回答老问题，因为我们刚刚把这个任务放在我们的积压中。但现在我们可以重新确定优先级并尝试您的解决方案。一旦我们尝试过，我会发表评论并接受答案，如果它有效的话。

很好 @JohnShelley 感谢您的反馈，我也更新了一些最近的发现！干杯！