Apollo/GraphQLでStyleguidistを使用して設定する方法

Question

Graphguを使用してStyleguidist用の偽データを入力しようとしています。 Expressを使用してGraphQLサーバを作成していますが、アポロをStyleguidistに接続する方法がわかりません。この例では、index.jsファイルを使用して、Apolloのタグにルートコンポーネントをラップしています。

Styleguidistの仕組みが不明ですが、index.jsファイルの場所がわかりません。

Styleguidistからwebpackを設定する方法はありますが、webpackを使ってApolloを使用する方法はわかりません。

Answer 1

Styleguidistの各例は、独立したリアクトツリーとしてレンダリングされ、そしてあなたは、このようなReduxの例ではショーとしてそれをオーバーライドする必要がありますので、ラッパーコンポーネントは、ルートコンポーネントです：だから

// 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

Styleguidistは2つの方法で使用できます.1つはReact Create Appを使用し、次にNPM Styleguidistパッケージをインストールすることです。次に、私が見いだしたもう1つの方法は、githubレジストリの例から始まり、コンポーネントの置き換えです。私が最初にしたのは、Webpackがメインフォルダにインストールされていないが、NPMモジュールで使用されていたので、React Create Appを使用した場所でした。私はエラーを取得して、そのメソッドで

：

「モジュールの解析に失敗しました：予期しないトークン（16：6）。 は、このファイルの種類を処理するために、適切なローダーが必要かもしれません」

これは、Webpackを設定する必要があることを意味します。私はこれを解決しませんでしたが、単にstyleguide.config.jsファイルをBabelと連携するように設定する必要があります。 （ちょうど推測）

これで問題を解決するラッパーを正常に使用することはできませんでした。代わりに、私はhttps://github.com/styleguidist/exampleにStyleguidistの例をダウンロードし、新鮮に始めました。違いはわかりませんが、ラッパーを使用したとき、ページのすべてのコンポーネントにApolloProviderラッパーを追加すると効果的でした。

HttpLinkとInMemoryCacheも使用する必要がありますが、Apollo 2を動作させるにはこれに関する一般的な設定はhttps://www.apollographql.com/docs/react/basics/setup.htmlです。クライアントの作成中。

GraphQL/Expressサーバをポート4000で使用し、Styleguidistをデフォルトでポート6060に使用していたため、私のGraphQLサーバに別のポートを使用していました。つまり、新しいHttpLinkにuriを渡して追加しましたエクスプレスサーバーへの回線は、corsを許可します。

エクスプレスGraphQlとアポロサーバーでCORSのための参照： 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'); 
});