如何通过 Apollo/GraphQL 使用 Styleguidist 进行配置

Question

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

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

有通过webpack配置Styleguidist的方法，但是我不知道如何使用webpack来使用Apollo

Answer 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')
  }
};

Answer 2

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

用那个方法我得到了错误：

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

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

所以，（到目前为止）无法成功使用解决问题的包装器。因此，我在 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');
});

如何通过 Apollo/GraphQL 使用 Styleguidist 进行配置

How to configure using Styleguidist with Apollo/GraphQL

javascript

apollo

graphql

react-styleguidist