Get Started

You have two ways of using CMS.

First one requires minimum configuration, but you have to follow the naming pattern for your GraphQL schema.

The second one doesn't require following any pattern but you have to specify 'Query' and 'Mutation' methods for each type in config object.

GraphQL CMS contains:

• React component which you can run as child component or on a separate route.
• Middleware for your server to provide config object and printed schema.

P.S. don't forget that your schema must meet the simple requirements.

Server side usage:

…
import express from 'express';
import { printSchema } from 'graphql';
import schema from '../schema';
import graphqlCMS from 'graphql-auto-generating-cms/lib/middleware';
let app = express();

let config = {schema: printSchema(schema)}
app.use('/graphql_cms_endpoint', graphqlCMS(config));
…
app.listen(port)

All you need to do is specify the URL endpoint. In this example it is '/graphql_cms_endpoint' which you will use on client side, and config object with your printed schema.

We will talk about config object structure in a bit.

Client side usage:

...
import GraphqlCMS from 'graphql-auto-generating-cms';
import 'graphql-auto-generating-cms/lib/styles.css';

export default (
    <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
        <Route
           path='/graphql-cms'
           endpoint='/graphql_cms_endpoint'
           graphql='/graphql'
           components={GraphqlCMS}
        />
        …
</Router>

Or as child component:

<GraphqlCMS
   endpoint='/graphql_cms_endpoint'
   graphql='/graphql'
/>

Props definition:

• endpoint - same URL you specified in middleware
• graphql - your GrpahQL API URL

And that's it! If you are using this approach with naming pattern this will be enough to see the basic generated CMS.

Lets see how naming pattern works, then how to specify configuration object to make CMS a more accurate fit for your needs.