前回は、GraphQL のセットアップを行いました。

今回は、オブジェクトを作成し、GraphQL でオブジェクトの一覧や、特定のオブジェクトを取得します。

コードは、前回のコードを使います。

const { ApolloServer, gql } = require("apollo-server")

const typeDefs = gql`
  type Query {
    books: [String!]!
    amount: Int
  }
`

const resolvers = {
  Query: {
    books: () => {
      return ["オズの魔法使", "風と共に去りぬ", null]
    },
    amount: () => {
      return 3
    },
  },
}

const server = new ApolloServer({
  typeDefs,
  resolvers,
})

server.listen().then(({ url }) => {
  console.log("🚀  Server ready at " + url)
})

オブジェクトを作成する

オブジェクトを作成するには、typeDefsgql内にオブジェクトのスキーマを作成します。

今回は、本のオブジェクトを作成してみましょう。

まずは、books オブジェクトのデータを作っておきましょう。

オブジェクトのデータには、『id』『title』『author』が入る様にします。

const books = [
  {
    id: 1,
    title: "オズの魔法使",
    author: "ライマン・フランク・ボーム",
  },
  {
    id: 2,
    title: "風と共に去りぬ",
    author: "マーガレット・ミッチェル",
  },
]

次に、オブジェクトの型を定義します。

type Book {
  id: Int!
  title: String!
  author: String!
}

Query の型に、Book の型を指定します。

books のStringBookに変更しましょう。

また、amount は削除しておきます。

const typeDefs = gql`
  type Query {
    books: [Book!]!
  }

  type Book {
    id: Int!
    title: String!
    author: String!
  }
`

最後に、リゾルバーを設定します。

books には、初めに作成したオブジェクトのデータを指定します。

const resolvers = {
  Query: {
    books: () => books,
  },
}

では、ブラウザで確認しましょう。

image2

エラーが発生しました。

books オブジェクトの中を指定していないからエラーが発生しています。

books の中にさらに『{}』でクエリを作成しましょう。

query ExampleQuery {
  books {
    id
    title
    author
  }
}

image3

実行してみると

image4

オブジェクトの一覧を取得することができました。

ちなみに、author を削除して実行してみると、

image5

『id』と『title』のみ表示されました。

オブジェクトから特定の単一データを取得する

オブジェクトから、特定の単一データを取得します。

まずは、typeDefsgql内にある Query に book を作成します。

型は、Book を使用します。

type Query {
  books: [Book!]!
  book: Book
}

book の後に、どのパラメータで特定するかを指定します。

今回は、idを指定します。

idInt型なので、Intも指定します。

type Query {
  books: [Book!]!
  book: Book
}

※型には、ID 型がありますが、ID 型を使用する場合は、idを String 型にします。

単一データを取得するリゾルバーを作成します。

クエリ名は、book にします。

また、id を取得するために、パラメータを設定します。

パラメータは、『parent』『args』『context』とあります。

const resolvers = {
  Query: {
    books: () => books,
    book: (parent, args, context) => {},
  },
}

今回は、argsを使用します。

argsは、GraphQL で指定したデータになります。

argsで id を取得します。

const resolvers = {
  Query: {
    books: () => books,
    book: (parent, args, context) => {
      const bookId = args.id
    },
  },
}

一度、console.logbookIdを確認します。

ブラウザの Operations の横にある、『+』をクリックして、新しいクエリを作成します。

image6

query を作成して、その中に book を入力中、book を選択する、自動で単一データが検索できるようになります。

image7

image8

book の中に、『id』『title』『author』を指定します。

image9

中央下に出ている Variables で、id を指定します。

今回は、『1』を指定しましょう。

image10

実行すると、

image11

image12

book には『null』が表示されましたが、console.logの結果は、『1』が表示されました。

これは、id を正常に取得できているということです。

では、null の部分にデータを表示させます。

books の中のidと、bookIdが合致しているデータを取得します。

合致しているかどうかは、findを使います。

const resolvers = {
  Query: {
    books: () => books,
    book: (parent, args, context) => {
      const bookId = args.id
      const book = books.find(book => book.id === bookId)
    },
  },
}

id がなければ、『null』を返し、id があれば単一データを返す様にします。

const resolvers = {
  Query: {
    books: () => books,
    book: (parent, args, context) => {
      const bookId = args.id
      const book = books.find(book => book.id === bookId)
      if (!book) return null
      return book
    },
  },
}

一通り完成したので、ブラウザで確認します。

image13

実行してみると、

image14

指定したデータを取得することができました。

ブログ一覧