如何使用带有 Apollo/GraphQL 的 Styleguidist 进行配置答案

【问题标题】：How to configure using Styleguidist with Apollo/GraphQL如何使用带有 Apollo/GraphQL 的 Styleguidist 进行配置
【发布时间】：2018-05-14 22:39:35
【问题描述】：

我正在尝试使用 GraphQL 为 Styleguidist 填充假数据。我正在使用 Express 来制作我的 GraphQL 服务器，但我不确定如何将 Apollo 连接到 Styleguidist？示例使用 index.js 文件并将根组件包装在 Apollo 的标签中。

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

有通过webpack配置Styleguidist的方法，但是不知道怎么用webpack来使用Apollo。

【问题讨论】：

你指的是什么例子？
我正在观看 Udemy 上的课程，但也在 blog.graph.cool/…，如果您向下滚动到“现在我们正在将所需的包导入 src/index.js”。它让你知道一些配置，但也建议 React.dom 方法看起来像： ReactDOM.render(( ), document.getElementById('root') )
在模块的某处是否有 Styleguidist 的主 index.js 文件？
我尝试在 ApolloProvider 标签中包装组件 Button，我得到的错误消息是： Invariant Violation: could not find "client" in the context of "Apollo(Button)"。将根组件包装在中
我正在尝试使用 Wrapper 方法，如下所示：react-styleguidist.js.org/docs/… 但我认为这不是票，因为它包装了所有单独的组件。在我看来，我需要一种包装根组件的方法，因为这就是示例所做的并且就是上面的错误消息。

标签： javascript graphql apollo react-styleguidist

【解决方案1】：

Styleguidist 中的每个示例都呈现为一个独立的 React 树，而 Wrapper 组件是根组件，因此您需要像 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')
  }
};

【讨论】：

【解决方案2】：

所以你可以通过两种方式使用 Styleguidist，一种是使用 Create React App 然后安装一个 NPM Styleguidist 包。然后我发现的另一种方法是从一个示例 github 注册表开始，并随时替换组件。我做了第一个：我使用了 Create React App，所以 Webpack 没有安装在我的主文件夹中，而是在 NPM 模块中使用。

使用这种方法我得到了错误：

“模块解析失败：意外令牌 (16:6) 你可能需要一个合适的加载器来处理这个文件类型。”

这意味着我需要配置 Webpack。我没有解决这个问题，但它可能只需要配置 styleguide.config.js 文件以与 Babel 一起使用。（只是猜测）

因此，（到目前为止）无法成功使用解决问题的 Wrapper。因此，我在https://github.com/styleguidist/example 下载了一个 Styleguidist 示例并重新开始。我不确定有什么区别，但是当我使用包装器时，它可以很好地为我页面上的每个组件添加一个 ApolloProvider 包装器。

要让 Apollo 2 正常工作，您还需要使用 HttpLink 和 InMemoryCache。有一个关于这个的一般设置：https://www.apollographql.com/docs/react/basics/setup.html。在创建客户端。

我为我的 GraphQL 服务器使用了不同的端口，因为它在端口 4000 使用 GraphQL/Express 服务器，而 Styleguidist 默认使用端口 6060。所以我做了两件事：将 uri 传递给新的 HttpLink 并添加了一个连接到 express 服务器以允许 cors。

Express GraphQl 和 Apollo 服务器中 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');
});

【讨论】：