使用 Apollo GraphQL 建立 Argument | 點燈坊

GraphQL 的 Query 除了回傳資料外，也能如 Function 般傳入 Argument。

Version

macOS Catalina 10.15
WebStorm 2019.2.3
Node 10.16.3
Apollo GraphQL 2.9.6

Apollo GraphQL

src/index.js

let { ApolloServer, gql } from 'apollo-server'

let data = [
  { id: 1, title: 'FP in JavaScript', price: 100 },
  { id: 2, title: 'RxJS in Action', price: 200 },
  { id: 3, title: 'Speaking JavaScript', price: 300 }
]

let typeDefs = gql`
  type Query {
    bookById(id: Int!): Book
  }

  type Book {
    id: Int
    title: String
    price: Int
  }
`;

let bookById: (_, { id }) => data.find(x => x.id === id)

let resolvers = {
  Query: {
    bookById
  }
};

let apolloServer = new ApolloServer({ typeDefs, resolvers })

apolloServer.listen()
  .then(({ url }) => `GraphQL Server ready at ${ url }`)
  .then(console.log)

第 3 行

let data = [
  { id: 1, title: 'FP in JavaScript', price: 100 },
  { id: 2, title: 'RxJS in Action', price: 200 },
  { id: 3, title: 'Speaking JavaScript', price: 300 }
]

data 為 array of object。

10 行

type Query {
  bookById(id: Int!): Book
}

在 schema 內定義了 bookById query，根據傳入 id 回傳特定 Book type object，id 為 Int，後面加上 ! 表示 id 不可為 null。

14 行

type Book {
  id: Int
  title: String
  price: Int
}

定義 Book type，包含 object 內的 id、title 與 price。

21 行

let bookById: (_, { id }) => data.find(x => x.id === id)

Apollo GraphQL 的 resolver 依序有 4 個 argument： parent、args、context 與 info，讀取 argument 只會用到第二個 args，而 parent 目前用不到可用 _ 表示， context 與 info 目前可忽略。

GraphQL Playground

query {
  bookById(id: 1) {
    id
    title
  }
}

使用 bookById query，argument 傳入 id: 1，只回傳 id 與 title 兩個 field 即可。

GraphQL 傳入 id: 1 查詢，且僅要求傳回 id 與 title 而已，並沒有回傳 price。

Conclusion

• 可在 resolver 的第二個 argument 直接解構取得 query 的 argument

Reference

Apollo Docs, Fetching data with resolvers