Querying a Data Sync server using a Data Sync client

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 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.

Prerequisites

You have Node.js and npm installed.
You have created an empty web project that supports ES6, using the webpack getting started guide.
You have completed the server getting started guide and the application is running.

Procedure

Create an address book server:

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 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`)
)

Run the server:

$ node index-2.js

🚀 Server ready at http://localhost:4000/graphql

Browse http://localhost:4000/graphql and interact with the playground. For example:
```
{
  addressBook {
    name
    address

  }
}
```

Check the output. For the example above, the output should be:

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

Add the following libraries to your javascript client:
```
npm install @aerogear/voyager-client
npm install graphql
npm install graphql-tag
```
A prerequisite is that you have created an empty web project that supports ES6, using the webpack getting started guide.

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 also required.

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();

Build and run the client application.
Browse the client application and check the console output.

It should include an array similar to the following:
```
address: "1 Red Square, Waterford"
name: "Alice Roberts"
__typename: "Person"
```