Javascript 如何在Apollo/GraphQL中使用Styleguidist进行配置

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

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

---

有很多方法可以通过webpack配置Styleguidist，但我不知道如何使用webpack来使用Apollo。

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

//lib/styleguide/Wrapper.js
从“React”导入React，{Component}；
从“apollo客户端”导入apollo客户端，{createNetworkInterface}；
从'react apollo'导入{ApolloProvider}；
const client=新客户端（{/*…*/}）；
导出默认类包装扩展组件{
render（）{
返回(
{this.props.children}
);
}
}
//styleguide.config.js
const path=require（'path'）；
module.exports={
样式指南组件：{
包装器：path.join（uu dirname，'lib/styleguide/Wrapper'）
}
};

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

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

“模块分析失败：意外令牌（16:6） 您可能需要适当的加载程序来处理此文件类型。“

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

因此，无法（到目前为止）成功使用解决问题的包装器。因此，我在下载了一个Styleguidist示例，并重新开始。我不确定区别是什么，但当我使用包装器时，向页面上的每个组件添加一个提供者包装器效果很好

为了让阿波罗2号正常工作，您还需要使用HttpLink和InMemoryCache。服务器在以下位置对此具有常规设置：。在“创建客户端”下

我的GraphQL服务器使用的是另一个端口，因为它在端口4000使用GraphQL/Express服务器，默认情况下，Styleguidist在端口6060。所以我做了两件事：向新的HttpLink传递一个uri，并向express服务器添加一行代码以允许cors

Express GraphQl和Apollo服务器中cors的参考：

因此，我的包装文件如下所示：

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

---

你指的是什么样的例子？我正在看Udemy上的一个类，但如果你向下滚动到“现在我们正在src/index.js中导入所需的包”，我也在看。它让您了解一些配置，但也建议React.dom方法如下：ReactDOM.render（（），document.getElementById（'root'））模块中的某个地方是否有Styleguidist的主index.js文件？我尝试过将组件包装在provider标记中的按钮，我得到的错误消息是：不变冲突：在“Apollo（按钮）”上下文中找不到“client”。将根组件包装在一个我尝试使用的包装方法中，如下所示：但我认为这不是问题所在，因为它包装了所有单独的组件。在我看来，我需要一种包装根组件的方法，因为示例就是这样做的，这就是上面的错误消息。