第2章 Data Sync クライアントを使用した Data Sync サーバーのクエリー

手順

1. アドレス帳サーバーを作成します。

   1. 次のコンテンツで index-2.js ファイルを作成します。

      const express = require('express')
      //Include our server libraries
      const { VoyagerServer, gql } = require('@aerogear/voyager-server')
      
      //Provide your graphql schema
      const typeDefs = gql`
      type Query {
        info: String!
        addressBook: [Person!]!
      }
      
      type Mutation {
        post(name: String!, address: String!): Person!
      }
      
      type Person {
        id: ID!
        address: String!
        name: String!
      }
      `
      
      let persons = [{
        id: 'person-0',
        name: 'Alice Roberts',
        address: '1 Red Square, Waterford'
      }]
      
      let idCount = persons.length
      const resolvers = {
        Query: {
          info: () => `This is a simple example`,
          addressBook: () => persons,
        },
        Mutation: {
      
          post: (parent, args) => {
             const person = {
              id: `person-${idCount++}`,
              address: args.address,
              name: args.name,
            }
            persons.push(person)
            return person
          }
        },
      }
      
      //Initialize the library with your Graphql information
      const apolloServer = VoyagerServer({
        typeDefs,
        resolvers
      })
      
      //Connect the server to express
      const app = express()
      apolloServer.applyMiddleware({ app })
      
      app.listen(4000, () =>
        console.log(`🚀 Server ready at http://localhost:4000/graphql`)
      )

      Copy to Clipboard Toggle word wrap

   2. サーバーを実行します。

      $ node index-2.js
      
      🚀 Server ready at http://localhost:4000/graphql

      Copy to Clipboard Toggle word wrap

   3. http://localhost:4000/graphql を参照してプレイグラウンドを操作します。以下に例を示します。

      {
        addressBook {
          name
          address
      
        }
      }

      Copy to Clipboard Toggle word wrap

   4. 出力を確認します。上記の例では、出力は次のようになります。

      {
        "data": {
          "addressBook": [
            {
              "name": "Alice Roberts",
              "address": "1 Red Square, Waterford"
            }
          ]
        }
      }

      Copy to Clipboard Toggle word wrap

2. 次のライブラリーを JavaScript クライアントに追加します。

   npm install @aerogear/voyager-client
   npm install graphql
   npm install graphql-tag

   Copy to Clipboard Toggle word wrap
   注記

   前提条件は、webpack getting started ガイドを使用して、ES6 をサポートする空の Web プロジェクトを作成していることです。

3. index.js ファイルを作成して、手順 1 と同じクエリーを作成しますが、JavaScript を使用します。

   この例では、設定オブジェクトが作成され、httpUrl フィールドが Voyager サーバーアプリケーションの URL に設定されています。クライアントアプリケーションがサブスクリプションを使用する場合は、wsUrl フィールドも必要です。

   src/index.js

   // gql is a utility function that handles gql queries
   import gql from 'graphql-tag';
   
   import { OfflineClient } from '@aerogear/voyager-client';
   
   // connect to the local service.
   let config = {
     httpUrl: "http://localhost:4000/graphql",
     wsUrl: "ws://localhost:4000/graphql",
   }
   
   async function queryPeople() {
   
     // Actually create the client
     let offlineClient = new OfflineClient(config);
     let client = await offlineClient.init();
   
     // Execute the query
     client.query({
         fetchPolicy: 'network-only',
         query: gql`
         query addressBook{
           addressBook{
           name
           address
           }
         }
         `
       })
       //Print the response of the query
       .then( ({data}) => {
         console.log(data.addressBook)
       });
   }
   
   queryPeople();

   Copy to Clipboard Toggle word wrap

4. クライアントアプリケーションをビルドして実行します。

5. クライアントアプリケーションを参照し、コンソール出力を確認します。

   次のような配列を含める必要があります。

   address: "1 Red Square, Waterford"
   name: "Alice Roberts"
   __typename: "Person"

   Copy to Clipboard Toggle word wrap