設置作出反應，故事書與之反應，阿波羅

有沒有辦法使用陣營阿波羅與之反應，故事書？以前我是嘗試接力，並且存在允許創建存根容器，將不需要網絡訪問，但使用的靜態數據的模塊（https://github.com/orta/react-storybooks-relay-container）。設置作出反應，故事書與之反應，阿波羅

有沒有爲陣營阿波羅框架等效？ http://dev.apollodata.com/react/

FWIW我與陣營本地工作，但這個想法和設置一切的背後應該是非常類似（比如我使用https://github.com/storybooks/react-native-storybook，而不是基於Web的解決方案）

來源

2016-11-08 John Shelley

好了，這是一個相當老問題，但我會在這裏發佈一個答案，以供任何需要答案的開發合作伙伴。 請如果這是很好的一個人，這是不夠清晰的只是讓我知道，我會更新我的答案

爲了使其工作（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組件發出的請求，否則您將收到一個沒有被嘲笑的錯誤，然後你就準備好了。

來源

2017-02-23 15:56:04

謝謝！總是回答以前的問題，因爲我們剛剛把這個任務放在我們的積壓工作中。但現在我們可以重新排列優先順序並嘗試您的解決方案。一旦我們嘗試了，我會回覆評論，如果它能夠正常工作，我會接受答案。 –

不錯@JohnShelley感謝您的反饋我也更新了一些最近的調查結果！乾杯！ –

設置作出反應，故事書與之反應，阿波羅

回答

相關問題