Querying a Data Sync server using a Data Sync client

  • 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,
            return person
      //Initialize the library with your Graphql information
      const apolloServer = VoyagerServer({
      //Connect the server to express
      const app = express()
      apolloServer.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 {
    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
    npm install graphql-tag
    A prerequisite is that you have created an empty web project that supports ES6, for example, using the webpack getting started guide.
  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.

    // 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
          fetchPolicy: 'network-only',
          query: gql`
          query addressBook{
        //Print the response of the query
        .then( ({data}) => {
  4. Build and run the client application.

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