有什么方法可以将 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 的解决方案）
【问题讨论】：
标签： reactjs react-native apollostack react-apollo
嗯，这是一个相当古老的问题，但我会在这里为任何需要答案的开发合作伙伴发布答案。 如果这对某人有好处并且还不够清楚，请告诉我，我会更新我的答案
为了使其正常工作（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 组件发出的请求完全匹配，否则您将收到一个未找到模拟的错误，然后您就可以滚动了。
【讨论】：