graphql-blog

REST APIs are REST-in-Peace APIs. Long Live GraphQL

This project uses GraphQL, Relay, Koa and Mongoose.

I use this for learning and document all process.

Note: While I was doing this project the documentation of the relay changed, soon the links may be outdated, please open issue case if something is wrong

The frontend is created with create-react-app and backend with my boilerplate but change express to koa.

Ok let's go!

1 - backend steps:

I change dependencies from my boilerplate to:

"dependencies": {
  "koa": "^2.4.1",
  "koa-graphql": "^0.7.3",
  "koa-router": "^7.3.0",
  "mongoose": "^5.0.0-rc0"
}

Now install npm i graphql

Create these folders in src:

|-- /src/
    |-- /types/
    |-- /model/

Start creating new file in model folder calling Post.js

Now create Post.js in a folder types

1.1 - Types

• Documentation for Types and Schemas

• GraphQL-JS documentation for this implementation of types Type API Reference

const Post = new GraphQLObjectType GraphQLObjectType

Create Query.js, query definition is similar to Post type, but the difference is that fields contains all queries and receive args.

The same for Mutation.js

At this point you now start the server npm start nodemon on folder backend and test mutation and query in http://localhost:5000/graphql

mutation createPostMutation {
  createPost(title: "Post Title 1", content: "Post Content 1") {
    id
    title
    content
  }
}

query Query {
  posts {
    id
    title
    content
  }
}

1.2 - Relay

A basic understanding of GraphQL and of the GraphQL.js implementation is needed to provide context for this library.

Understading cursor-based pagination in GraphQL

Relay Cursor Connections Specification

Node Interface

npm i graphql-relay

Create interface, connection and mutation folder:

|-- /src/
    |-- /mutation/
    |-- /connection/
    |-- /interface/
    |-- /types/
    |-- /model/

Create Node.js file in interface folder.

Explanation of nodeDefinitions

Create PostConnection.js file in connection folder.

Create PostMutation.js file in mutation folder.

Explanation of mutation

Alter Post.js type, Mutation.js and Query.js for adaptation to Relay

Test your new GraphQL, Relay server http://localhost:5000/graphql

mutation createPost($input: CreatePostInput!) {
  createPost(input: $input) {
    post {
      id
      title
    }
  }
}

Query variables for createPost:

{
  "input": {
    "title": "New post with Relay!",
    "content": "New post with Relay, content!"
  }
}

query allPosts {
  posts {
    edges {
      node {
        id
        title
        content
      }
    }
  }
}

Changes to the frontend Relay Modern:

• Query.js

2 - frontend steps:

Note 1: For not eject this project I chose follow this tutorial I use option 3

Note 2: For that option to work properly I needed to use yarn in place of npm, I do not know why, but it worked.

install:

• yarn add relay-runtime react-relay react-modal react-router-dom
• yarn add relay-compiler babel-plugin-relay --dev
• yarn global add get-graphql-schema

Create file .babelrc and insert:

{
  "plugins": [
    "relay"
  ]
}

Run this command in frontend folder with backend running get-graphql-schema http://localhost:5000/graphql > src/schema.graphql

Alter index.js:

• More about React Router v4
• BrowserRouter
• Switch

Alter App.js:

• query-renderer

Create Environment.js:

• relay-environment
• network-layer

Create folders:

|-- /src/
    |-- /mutations/
    |-- /components/

In mutations folder, create file CreatePostMutation.js:

• mutations, updater and optimisticUpdater

In components folder, create:

• Post.js fragment-container
• ListPage.js
• CreatePost.js

@connection https://blog.graph.cool/getting-started-with-relay-modern-46f8de6bd6ec

Run this in frontend folder ./node_modules/.bin/relay-compiler --src ./src/ --schema ./src/schema.graphql

Run yarn start and test!