Querying a Data Sync server using a Data Sync client

Prerequisites
  • You have Node.js and npm installed.

  • You have created an empty web project that supports ES6, for example, using the webpack getting started guide.

  • You have completed the server getting started guide and the application is running.

This section describes how to use the Voyager Client to create mobile and web applications that can communicate with the Voyager server application.

Data Sync provides JavaScript libraries which integrate your javascript app using with a server that also uses Data Sync. The client libraries are based on the Apollo client.

You will add the libraries to your mobile project, configure the client classes, connect to the server, and confirm that it works.

  1. Create an address book server:

    1. Create an index-2.js file with the following content:

      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 server = VoyagerServer({
        typeDefs,
        resolvers
      })
      
      //Connect the server to express
      const app = express()
      server.applyMiddleware({ app })
      
      app.listen(4000, () =>
        console.log(`🚀 Server ready at http://localhost:4000/graphql`)
      )
    2. Run the server:

      $ node index-2.js
      
      🚀 Server ready at http://localhost:4000/graphql
    3. Browse http://localhost:4000/graphql and interact with the playground. For example:

      {
        addressBook {
          name
          address
      
        }
      }
    4. Check the output. For the example above, the output should be:

      {
        "data": {
          "addressBook": [
            {
              "name": "Alice Roberts",
              "address": "1 Red Square, Waterford"
            }
          ]
        }
      }
  2. Add the following libraries to your javascript client:

    npm install @aerogear/voyager-client
    npm install graphql-tag
  3. Create an index.js file to make the same query as step 1, but from JavaScript.

    In this example, a config object is created, and the httpUrl field is set to the url of the Voyager server application. If the client app uses subscriptions, then the wsUrl field is required too.

    src/index.js
    // gql is a utility function that handles gql queries
    import gql from 'graphql-tag';
    
    import { OfflineClient } from '@aerogear/voyager-client';
    
    // For our client application, we will 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();
  4. Build and run the client application, the output should be similar to the following:

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