4

React-Storybooks で React-Apollo を使用する方法はありますか? 以前は Relay を試していましたが、ネットワーク アクセスを必要とせず、静的データを使用するスタブ コンテナーを作成できるモジュール ( https://github.com/orta/react-storybooks-relay-container ) があります。

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

FWIW 私は React-Native を使用していますが、すべての背後にあるアイデアとセットアップは非常に似ているはずです (たとえば、Web ベースのソリューションの代わりにhttps://github.com/storybooks/react-native-storybookを使用しています)

4

1 に答える 1

8

これはかなり古い質問ですが、回答が必要な開発パートナーが他にいる場合は、ここに回答を投稿します。これが誰かにとって良いことであり、それが十分に明確でない場合は、私に知らせてください。答えを更新します

それを機能させるために（react-apolloそして）、基本的にやりたいことからreact-storybook私のお気に入りが使用するアプローチはほとんどありません。それは、予想されるリクエストが発生するたびに、予想される応答で応答する必要があることをUIに伝えることです。適切にレンダリングするためにユーザー データを必要とするコンポーネントを使用して例を作成します。MockedProviderreact-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 />);
  });

typescript を使用しているため、このインポートでいくつかの問題がaddTypenameToDocument発生しました。ボイラープレートの create-react-app には何か問題がありますが、私が行ったことは、プロジェクト内のそのファイルにロジックを含めることです (非常に汚い、申し訳ありません)。

更新:addTypenameToDocument私が使用しているように行ったことをインポートする際の問題を回避するには、コマンドcreate-react-projectを実行し、 jest 構成ejectに以下を追加します。package.json

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

問題は、apollo-clientビルドされたファイル内に es6 があり、構文エラーが発生することです。さらに、反応するストーリーブックを使用している場合は、ストーリーブックの webpack 構成にこの構成を追加することをお勧めします。

すべてを実行する前に、これを見つけました: https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead#.1um2z7ablテストセクションにも優れたアプローチがあります (ほとんど私はまだ自分自身を試していませんaddTypenameToDocumentが、それが機能する場合は、react-create-project の取り出しコマンドを実行せずにテストできます。

それ以外では、クエリと変数が UI コンポーネントによって行われた要求とまったく同じであることを確認する必要があります。そうしないと、mocked が見つからないというエラーが発生し、ロールする準備が整います。

于 2017-02-23T15:56:04.537 に答える