React-StorybooksをReact-Apolloでセットアップする

Question

React-StolbooksでReact-Apolloを使用する方法はありますか？以前はRelayを試していましたが、ネットワークアクセスは必要なくスタティックデータを使用するスタブコンテナの作成を可能にするモジュール（https://github.com/orta/react-storybooks-relay-container）がありました。

React-Apolloフレームワークに相当するものはありますか？ http://dev.apollodata.com/react/

FWIW私が反応-ネイティブで働いていますが、すべての背後にある考え方とセットアップは非常に類似していなければならない（例えば、私が代わりにWebベースのソリューションのhttps://github.com/storybooks/react-native-storybookを使用しています）

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

私は、彼らはtypescriptですを使用して、私の定型作成反応するアプリで何か問題がある。このaddTypenameToDocument輸入原因でいくつかの問題を得たが、どのようなI私のプロジェクト内のそのファイルにロジックを含めることです（非常に汚い、申し訳ありません）。

UPDATE：輸入問題を避けるために、私はcreate-react-projectがpackage.json冗談の設定に次のejectのコマンドを実行して追加することです使用していて、私がやっていることaddTypenameToDocument：

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

問題の男は、そのapollo-clientにはビルドされたファイル内にes6があり、反応のストーリーブックを使用している場合は、ストーリーブックのwebpack設定にthisの設定を追加することができます。テストセクションのhttps://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead#.1um2z7ablが優れたアプローチは、あまりにも（ほぼ同じ）であるが、彼らは、私はまだ自分自身を試していないが、それが動作するかどうかaddTypenameToDocumentを使用していない：私はこれを発見したTHATのすべてを行う前に

react-create-projectのejectコマンドを実行せずにテストすることができます

それ以外は、クエリと変数がUIコンポーネントの要求と正確に一致することを確認してください嘲笑されていないエラーが見つかりました。そしてあなたは転がる準備ができています。