Graphql の雰囲気を掴む (apollo-server)

出来上がる物 & わかること

• 出来上がる物

  • https://github.com/baronTommy/apollo-server-pg

• わかること

  • mockの処理 と 実際の処理を併用
  • Graphqlのrelation(GraphQL Voyager)

• おまけ

  • axiosで叩いてみる

Graphql とは

これです!!!!!!!!!

https://twitter.com/NikkitaFTW/status/1011928066816462848

作業

node_modules インストール

• https://github.com/baronTommy/apollo-server-pg/blob/master/package.json

インストール

schemaを定義

• ディレクトリやファイル

  • /graphqlSchema/schema.graphql

• 補足
  type User{...},type Company{...}

schema

type Query {...}

schemaのデータの取得方法や、戻り値 のような定義

type Mutation {...}

データ更新時の、戻り値, のような定義

type User {
  id: ID!
  name: String!
}

type Company {
  id: ID!
  name: String!
}

type Query {
  user(id: Int, name: String): User,
  company(id: Int, name: String): Company,
  allUser: [User]
}

type Mutation {
  user(name: String): String!
}

mock処理の準備

• ディレクトリやファイル

  • /graphql/mock/mocks.js

• 補足
  schemaに一致させた準備
  idは、未定義 mockの値が返却される

export const User = () => ({
    // id: () => "2525",
    name: () => "mock 太郎"
  })
  
export const allUser = () => [
  User,
  User,
]

実際の処理の準備

• ディレクトリやファイル

• /graphql/querys.js

• 補足

  • 実際は、DBから取得したりなど

export const company =  (_, req) => {
    if (req.id === 123) {
        return {id: "123", name: "google (ガチデータ)"}
    }
    return {id: "", name: ""}
}

サーバ

• ディレクトリやファイル

  • /src/index.js

• 補足
  上記で作ったファイルなどをとりこむ

import express from 'express'
import bodyParser from 'body-parser'
import cors from 'cors'
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools'
import { graphqlExpress, graphiqlExpress } from 'apollo-server-express'
import { importSchema } from 'graphql-import'
import { express as voyagerMiddleware } from 'graphql-voyager/middleware';
import { mocks } from '../graphql/mock'
import { resolvers } from '../graphql/resolvers'

const typeDefs = importSchema('graphqlSchema/schema.graphql')
const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

// mock 有効化
addMockFunctionsToSchema({ 
  schema,
  mocks,
  // mock と resolversの併用
  preserveResolvers: true,
 })

const app = express()
app.use(cors());

// end point
app.use('/graphql', bodyParser.json(), graphqlExpress({ schema }))

// GQL エディタ 
app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' }))

// GQL relation
app.use('/voyager', voyagerMiddleware({ endpointUrl: '/graphql' }));

app.listen(3000, () => console.log(
  '/graphql',
  '/graphiql',
  '/voyager',
))

最後に

yarn start or npm start

• voyager

  • http://localhost:3000/voyager
  • relationがみれます

• GQL エディタ

  • http://localhost:3000/graphiql

おまけ

axiosからたたく

他のクライアントもあるが、とりあえず

axios({
    url: 'http://localhost:3000/graphql',
    method: 'POST',
    data: {
    query: `query {
        allUser {
        id
        name
        }
    }`
    }
})

参考にさせて貰いました

• https://qiita.com/mizchi/items/c078aea032cd00ba3e86
• https://ushumpei.hatenablog.com/entry/2017/12/12/000000