设置作出反应，故事书与之反应，阿波罗

Question

有没有办法使用阵营阿波罗与之反应，故事书？以前我是尝试接力，并且存在允许创建存根容器，将不需要网络访问，但使用的静态数据的模块（https://github.com/orta/react-storybooks-relay-container）。

有没有为阵营阿波罗框架等效？ http://dev.apollodata.com/react/

FWIW我与阵营本地工作，但这个想法和设置一切的背后应该是非常类似（比如我使用https://github.com/storybooks/react-native-storybook，而不是基于Web的解决方案）

Answer 1

好了，这是一个相当老问题，但我会在这里发布一个答案，以供任何需要答案的开发合作伙伴。 请如果这是很好的一个人，这是不够清晰的只是让我知道，我会更新我的答案

为了使其工作（react-apollo和react-storybook），你有几种方法从我最喜欢的会使用MockedProvider从react-apollo你基本上想要做的是告诉你的用户界面，每当预期请求被解雇它应该响应与预期的响应，让我们的使用需要的用户数据正确地呈现组件<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进口造成一定的问题，有什么不对，但我所做的就是将该文件中的逻辑包含在我的项目中（非常肮脏，对此感到抱歉）。

UPDATE：避免问题进口addTypenameToDocument因为我使用create-react-project是运行eject命令，并添加以下到package.json开玩笑配置我做了什么：

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

问题s表示的家伙在apollo-client都有自己建造文件中ES6，你会得到语法错误，最重要的是，如果你使用的是发生反应，故事书，你可能会想this配置添加到故事书的配置的WebPack。

前尽一切我发现这一点：https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead#.1um2z7abl的试验段有一个很好的做法太（几乎相同），但他们不使用addTypenameToDocument我还没有尝试自己还没有，但如果它的工作原理您将能够在不运行react-create-project的eject命令的情况下进行测试

除此之外，您应该确保您的查询和变量完全匹配您的UI组件发出的请求，否则您将收到一个没有被嘲笑的错误，然后你就准备好了。