React-Stolingsbooks with React-Apollo

Question

React-Stolings와 함께 React-Apollo를 사용할 방법이 있습니까? 이전에는 Relay를 시도했지만 네트워크 액세스가 필요하지 않지만 정적 데이터를 사용하는 스텁 컨테이너를 만들 수있는 모듈 (https://github.com/orta/react-storybooks-relay-container)이 있습니다.

React-Apollo 프레임 워크에 해당하는 항목이 있습니까?

Answer 1

음, 이것은 아주이다 (예를 들어 내가 대신 웹 기반 솔루션의 https://github.com/storybooks/react-native-storybook을 사용하고 있습니다) http://dev.apollodata.com/react/

FWIW 나는 반작용 네이티브 함께 일하고 있어요하지만 모든 것을 뒤에 아이디어와 설정은 매우 유사해야 낡은 질문이지만 답변을 필요로하는 추가 개발 파트너에 대해서는 여기에 답변을 게시 할 것입니다. 이 사람에 대한 좋은이며 명확하지 않은 경우 단지 충분히 알려 주시기 바랍니다 그리고 난

위해 그것이있는 내가 좋아하는이 될 것입니다 당신이 몇 가지 접근 방식을 가지고 (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 />); 
    }); 

는 내가 거기에 뭔가 잘못이지만, 그들이 타이프 내 보일러 만들-반응-응용 프로그램과 함께를 사용하는이 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 구성 요소의 요청과 정확히 일치해야합니다. 조롱받지 않은 오류가 발견되면 롤 준비가 된 것입니다.