Getting Started with Hello World Data Sync

In this example, you add the Voyager Server library to your Express node.js project, create an index-1.js file, run the server, and query GraphQL.

  • Voyager Server is a set of Node.js libraries that can be used to build a Data Sync server.

  • Voyager Server is the starting point for developing a Data Sync application.

Prerequisites
  • You have Node.js and npm installed.

  • You have created a node.js project.

Procedure
  1. Add libraries to your Node.js application:

    $ npm install graphql (1)
    $ npm install express (2)
    $ npm install @aerogear/voyager-server (3)
    1 See https://graphql.org/
    2 See https://expressjs.com/
    3 The Voyager Server library that enables data sync
  2. Create an index-1.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 {
        hello: String
      }
    `
    
    //Create the resolvers for your schema
    const resolvers = {
      Query: {
        hello: (obj, args, context, info) => {
          return `Hello world`
        }
      }
    }
    
    //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`)
    )
  3. Run the server:

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

    {
      hello
    }
  5. Check the output. For the example above, the output should be:

    {
      "data": {
        "hello": "Hello world"
      }
    }

To get started with the Data Sync framework, see the sample application. In this app, you can explore a more complex schema.

Before proceeding, make sure you have an understanding of the following GraphQL concepts:

  • Schema design

  • Resolvers

  • Subscriptions

Getting started with an example data source schema

Create a GraphQL schema for an existing data source schema.

employee_id, ID

employee_name, String

category_id, ID

category_id, ID

employee_type, String

security_clearance, ID

Additional resources

Create a GraphQL schema for an existing data source schema.

Create a GraphQL schema for an existing data source schema.

Prerequisites
Procedure
  1. If the Data Sync Server is running, stop it.

  2. Edit the index.js file and replace its contents with the following content:

    const express = require('express')
    //Include our server libraries
    const { VoyagerServer, gql } = require('@aerogear/voyager-server')
    
    // Stub that reflects data source mapping
    const employees = [{employee_id: 1, employee_name: "joe", cateory_id: 1 }, {employee_id: 2, employee_name: "john", cateory_id: 2}];
    
    const categories = [{category_id: 1, employee_type:"Manager", security_clearance: 1}, {category_id: 2, employee_type:"Associate", security_clearance: 2}];
    
    //GraphQL schema for mapping to data source mapping
    const typeDefs = gql`
      type Employee {
          employee_id: ID!,
          employee_name: String!
          category: Category
      }
      type Category {
          category_id: ID!,
          employee_type: String!,
          security_clearance: ID!
      }
      type Query {
        listEmployees: [Employee]
      }
    `
    
    //Create the resolvers for your schema
    const resolvers = {
      Query: {
        listEmployees: (obj, args, context, info) => {
          return employees;
        }
      },
      Employee: {
        category(employee) {
            return filter(categories, {category_id: employee.cateory_id});
        }
      }
    }
    
    //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`)
    )
  3. Start the server.

  4. Open an internet browser and browse to http://localhost:4000/graphql.

  5. To list Employees, execute the following command in the GraphQL window:

    {
      listEmployees
      {
        employee_id,
        employee_name,
      }
    }
Verification steps

For the example above, the output should be:

{
  "data": {
    "listEmployees": [
      {
        "employee_id": "1",
        "employee_name": "joe"
      },
      {
        "employee_id": "2",
        "employee_name": "john"
      }
    ]
  }
}
Additional resources