Reactjs 使用React Apollo设置React故事书

有没有办法将React Apollo与React故事书结合使用？之前我试过中继，有一个模块（）允许创建不需要网络访问但使用静态数据的存根容器

阿波罗框架是否有一个等价物

---

FWIW我正在与React Native合作，但所有内容背后的想法和设置应该非常相似（例如，我正在使用而不是基于web的解决方案）

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

为了让它正常工作（

react apollo

和

react storybook

），我最喜欢的方法是使用

react apollo

，基本上你想做的是告诉你的用户界面，无论何时触发预期请求，它都应该以预期的响应进行响应，因此，让我们使用storybook的Web包配置的组件

配置来制作一个示例

在做所有这些之前我发现：在测试部分也有一个很好的方法（几乎相同），但是他们没有使用
addTypenameToDocument
我自己还没有尝试过，但是如果它起作用，您将能够在不运行react create project的eject命令的情况下进行测试

除此之外，您应该确保您的查询和变量与您的UI组件发出的请求完全匹配，否则您将收到一个未发现的错误，然后您就可以开始运行了。
谢谢！总是回答老问题，因为我们刚刚把这个任务放到了待办事项中。但现在我们可以重新确定优先级并尝试您的解决方案。一旦我们尝试过，我会回复，如果它有效，我会接受答案。Nice@johnshelly谢谢你的反馈，我也更新了一些最新的发现！干杯
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;

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 />);
  });

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