How to configure using Styleguidist with Apollo/GraphQL

Question

I'm trying to use GraphQL to populate fake data for Styleguidist. I'm using Express to make my GraphQL server but I'm unsure how to connect Apollo into Styleguidist? The examples use the index.js file and wrap the root component in an tag for Apollo.

I am unsure how Styleguidist works, I don't know where the index.js file is.

There are ways to configure Styleguidist through webpack, but I don't know how to use webpack to use Apollo.

I am watching a class on Udemy, but also at https://blog.graph.cool/how-to-use-create-react-app-with-graphql-apollo-62e574617cff, if you scroll down to "Now we’re importing the needed packages in src/index.js". It is letting you know some configurations, but also recommending that the React.dom method look like: ReactDOM.render(( ), document.getElementById('root') ) — Patricia Green, Dec 01 '17 at 14:09
Is there a main index.js file for Styleguidist somewhere in the module? — Patricia Green, Dec 01 '17 at 14:17
I've tried wrapping the component, Button in the ApolloProvider tag, the error message that I get is: Invariant Violation: Could not find "client" in the context of "Apollo(Button)". Wrap the root component in an — Patricia Green, Dec 01 '17 at 16:04
I'm trying to use Wrapper method as here: https://react-styleguidist.js.org/docs/cookbook.html#how-to-change-the-layout-of-a-style-guide But I don't think that's the ticket because it wraps all the individual components. It seems to me I need a way to wrap the root component, because that's what the examples do and that is the above error message. — Patricia Green, Dec 01 '17 at 16:07

score 2 · Accepted Answer · answered Dec 02 '17 at 15:36

Each example in Styleguidist is rendered as an independent React tree, and the Wrapper component is the root component, so you need to override it as show in the Redux example like this:

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

score 0 · Answer 2 · answered Dec 04 '17 at 23:09

So you can use Styleguidist in two ways, one by using Create React App then installing an NPM Styleguidist package. Then the other method that I found is starting from an example github registry and replacing the components as you go. I had done the first: where I used Create React App so Webpack was not installed in my main folder but was being used in the NPM module.

With that method I was getting the error:

"Module parse failed: Unexpected token (16:6) You may need an appropriate loader to handle this file type."

Which means that I needed to configure Webpack. I didn't solve this, but it may just need to have styleguide.config.js file configured to work with Babel. (just a guess)

So, could not (so far), successfully use the Wrapper that solves the problem. So instead I downloaded an example of Styleguidist at https://github.com/styleguidist/example and started fresh. I'm not sure what the difference is, but when I used a wrapper it worked well to add an ApolloProvider wrapper to every component on my page.

To get Apollo 2 to work though you also need to use HttpLink and InMemoryCache. The have a general setup about this at: https://www.apollographql.com/docs/react/basics/setup.html. Under creating a client.

I was using a different port for my GraphQL server because it was using a GraphQL/Express server at port 4000 and Styleguidist by default is at port 6060. So I did two things: passed a uri to the new HttpLink and added a line to the express server to allow cors.

The ref for cors in Express GraphQl and Apollo server: https://blog.graph.cool/enabling-cors-for-express-graphql-apollo-server-1ef999bfb38d

So my wrapper file looks like:

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

and my server file looks like:

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

How to configure using Styleguidist with Apollo/GraphQL

2 Answers2