如何使用Styleguidist和阿波罗/GraphQL进行配置

Question

我试图使用GraphQL来填充Styleguidist的假数据。我正在使用Express来制作我的GraphQL服务器，但是我不知道如何将阿波罗连接到Styleguidist？示例使用index.js文件，并将根组件封装在阿波罗的标记中。

我不知道Styleguidist是如何工作的，我不知道index.js文件在哪里。

有一些方法可以通过webpack来配置史太基，但我不知道如何使用webpack来使用阿波罗。

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，一种是使用Create，然后安装包。然后，我发现的另一个方法是从一个示例github注册中心开始，并在执行过程中替换组件。我做了第一个:我使用，所以Webpack没有安装在我的主文件夹中，而是在NPM模块中使用。

使用该方法，我得到了错误：

“模块解析失败:意外令牌(16:6)您可能需要一个适当的加载程序来处理此文件类型。”

这意味着我需要配置Webpack。我没有解决这个问题，但它可能只需要配置styleguide.config.js文件来处理Babel。(只是猜测)

所以，不能(到目前为止)，成功地使用包装器来解决问题。因此，我在https://github.com/styleguidist/example下载了一个Styleguidist示例，并重新启动。我不知道有什么区别，但是当我使用包装器时，它可以很好地将ApolloProvider包装器添加到页面上的每个组件中。

不过，要使阿波罗2号工作，还需要使用HttpLink和InMemoryCache。在：https://www.apollographql.com/docs/react/basics/setup.html上有一个关于这一点的一般设置。创造一个客户。

我为我的GraphQL服务器使用了不同的端口，因为它在端口4000使用GraphQL/Express服务器，而Styleguidist默认在端口6060。因此，我做了两件事:将uri传递给新的HttpLink，并向快递服务器添加一行以允许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');
});