Apollo/GraphQL에서 Styleguidist를 사용하여 구성하는 방법

Question

Graphgu를 사용하여 Styleguidist의 가짜 데이터를 채우려고합니다. Express를 사용하여 GraphQL 서버를 만들었지 만 아폴로를 Styleguidist에 연결하는 방법을 잘 모르겠습니다. 예제에서는 index.js 파일을 사용하고 Apollo 태그의 루트 구성 요소를 래핑합니다.

Styleguidist의 작동 방식이 확실하지 않아 index.js 파일의 위치를 ​​알 수 없습니다.

Styleguidist를 webpack을 통해 구성하는 방법이 있지만 webpack을 사용하여 Apollo를 사용하는 방법을 알지 못합니다.

Answer 1

Styleguidist의 각 예는 독립적 인 반작용 트리로 표현되며,이 같은 돌아 오는 예에서 쇼로 재정의해야하므로 래퍼 구성 요소 는, 루트 요소입니다 : 그래서

// lib/styleguide/Wrapper.js 
import React, { Component } from 'react'; 
import ApolloClient, { createNetworkInterface } from 'apollo-client'; 
import { ApolloProvider } from 'react-apollo'; 
const client = new ApolloClient({ /* ... */ }); 
export default class Wrapper extends Component { 
    render() { 
    return (
     <ApolloProvider client={client}> 
     {this.props.children} 
     </ApolloProvider> 
    ); 
    } 
} 


// styleguide.config.js 
const path = require('path'); 
module.exports = { 
    styleguideComponents: { 
    Wrapper: path.join(__dirname, 'lib/styleguide/Wrapper') 
    } 
}; 

Answer 2

Style Guidist를 두 가지 방법으로 사용할 수 있습니다. 하나는 React Create App을 사용하고 NPM Styleguidist 패키지를 설치하는 것입니다. 그럼 내가 찾은 다른 방법은 예제 github 레지스트리에서 시작하고 당신이가는대로 구성 요소를 교체하는 것입니다. 나는 첫 번째 작업을 수행했다 : React Create App을 사용하여 Webpack이 내 메인 폴더에 설치되지 않았지만 NPM 모듈에 사용되고 있었다. 나는 오류가 발생하였습니다 방법으로

:

"모듈이 실패 구문 분석 : 예기치 않은 토큰 (16 : 6) 이 파일 형식을 처리하기 위해 적절한 로더를해야 할 수도 있습니다."

Webpack을 구성해야한다는 의미입니다. 필자는이 문제를 해결하지 못했지만 단순히 styleguide.config.js 파일을 Babel과 작동하도록 구성해야 할 수도 있습니다. (단지 추측)

따라서 (지금까지) 문제를 해결하는 래퍼를 성공적으로 사용할 수 없었습니다. 대신에 나는 Styleguidist의 예를 https://github.com/styleguidist/example에 다운로드하고 새로 시작했습니다. 차이점이 무엇인지 모르겠지만 래퍼를 사용하면 내 페이지의 모든 구성 요소에 ApolloProvider 래퍼를 추가하는 것이 효과적입니다.

HttpLink 및 InMemoryCache도 사용해야하지만 Apollo 2가 작동하게하려면 이에 대한 일반적인 설정은 https://www.apollographql.com/docs/react/basics/setup.html입니다. 클라이언트 생성 중.

GraphQL/Express 서버를 포트 4000에서 사용하고 Styleguidist를 포트 6060에서 사용했기 때문에 GraphQL 서버에 다른 포트를 사용했습니다. 따라서 두 가지 작업을 수행했습니다. 즉, 새 HttpLink에 uri를 전달하고 추가했습니다 익스프레스 서버에 라인을 허용합니다.

익스프레스 GraphQl 아폴로 서버 고르의 심판 : 이 https://blog.graph.cool/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d

그래서 내 래퍼 파일과 같이 보인다 :

import React, { Component } from 'react'; 
import ApolloClient, { createNetworkInterface } from 'apollo-client'; 
import { ApolloProvider } from 'react-apollo'; 
import { HttpLink } from 'apollo-link-http'; 
import { InMemoryCache } from 'apollo-cache-inmemory'; 

const link = new HttpLink({ 
    uri: 'http://localhost:4000/graphql' 
}); 

const client = new ApolloClient({ 
    link, 
    cache: new InMemoryCache() 
}); 

export default class Wrapper extends Component { 
    render() { 
    return (
     <ApolloProvider client={client}> 
     {this.props.children} 
     </ApolloProvider> 
    ); 
    } 
} 

내 서버 파일은 다음과 같습니다

const express = require('express'); 
const expressGraphQL = require('express-graphql'); 
const schema = require('./schema/schema'); 
const cors = require('cors'); 

const app = express(); 
app.use(cors()); 
app.use('/graphql', expressGraphQL({ 
    schema: schema 
    , graphiql: true 
})); 

app.listen(4000,() => { 
    console.log('..listening'); 
});