Установка 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/

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

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

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

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

ПЕРЕД ДЕЛАТЬ ВСЕ, ЧТО Я нашел это: https://dev-blog.apollodata.com/seamless-integration-for-graphql-and-react-6ffc0ad3fead#.1um2z7abl на испытательном участке есть отличный подход тоже (почти то же самое), но они не используют addTypenameToDocument Я не попробовать себя еще, но если он работает вы сможете протестировать без запуска команды извлечения проекта реакции-создания

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