Настройка React-Storybooks с помощью React-Apollo

Question

Есть ли способ использовать React-Apollo с React-Storybooks? Ранее я пробовал Relay, и есть модуль ( https://github.com/orta/react-storybooks-relay-container), который позволял создавать контейнеры-заглушки, которые не требовали бы доступа к сети, но использовали статические данные.

Есть ли эквивалент для платформы React-Apollo? http://dev.apollodata.com/react/

Я работаю с React-Native, но идея и настройка всего этого должны быть очень похожими (например, я использую https://github.com/storybooks/react-native-storybook вместо веб-решения)

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 импорт, потому что они используют машинописный текст, и с моим образцом создания-реакции-приложения что-то не так, но я сделал, чтобы включить логику в этот файл в мой проект (очень грязно, извините за это).

ОБНОВЛЕНИЕ: чтобы избежать проблем с импортом addTypenameToDocument что я сделал, как я использую create-react-project это бежать eject команду и добавьте следующее к package.json шутливая конфигурация:

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

Проблема в том, что ребята в apollo-client имеет es6 в своих построенных файлах, и вы получите синтаксическую ошибку, к тому же, если вы используете историю сборника рассказов, вы, возможно, захотите добавить эту конфигурацию в конфигурацию веб-пакета сборника рассказов.

Перед тем, как делать все, что я нашел, это: https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead в разделе "Тест" также есть отличный подход (почти то же самое) но они не используют addTypenameToDocument Я еще не пробовал себя, но если это сработает, вы сможете протестировать, не выполнив команду eject на реагировать-создать-проект

Кроме этого, вы должны быть уверены, что ваш запрос и переменные совпадают точно так же, как и запрос, сделанный вашим компонентом пользовательского интерфейса, в противном случае вы получите ошибку, которая не была проверена как поддельная, и вы готовы к откату.

Answer 2

Мой случай был похожим, но с другой библиотекой, не React Storybooks, а с Apollo Client.

Если кто-то ищет то же самое, я публикую здесь то, что я сделал.

В конфиге шутки мне пришлось поставить:

      "moduleNameMapper": {
  "\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
"transformIgnorePatterns": [
  "<rootDir>/node_modules\\/(?!(apollo-client)\\/).*/"
]

Конечно, с установкойnpm i -D identity-obj-proxy