JSPM

  • Created
  • Published
  • Downloads 51011
  • Score
    100M100P100Q158516F
  • License MIT

Simple GraphQL Query Builder

Package Exports

  • gql-query-builder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gql-query-builder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GraphQL Query Builder

A simple helper function to generate GraphQL queries using plain JavaScript Objects (JSON).

Usage

Install

npm install gql-query-builder --save or yarn add gql-query-builder

API

const query = queryBuilder(options: object)

where options is { type, operation, fields, variables }

Name Description Type Requred Example
type The type of operation String Yes query, mutation
` Name of operation to be executed on server String Yes getThougts, createThought
fields Selection of fields Array/td> No ['id', 'name', 'thought']

['id', 'name', 'thought', { user: ['id', 'email'] }]
variables Variables sent to the operation Object No { key: value } eg: { id: 1 }

{ key: { value: value, required: true } eg:
{ email: { value: "user@example.com", required: true }, password: { value: "123456", required: true } }

Examples

Query:

import queryBuilder from 'gql-query-builder'

const query = queryBuilder({
  type: 'query',
  operation: 'thoughts',
  fields: ['id', 'name', 'thought']
})

console.log(query)

// Output
query {
  thoughts {
    id,
    name,
    thought
  }
}

Query (with variables):

import queryBuilder from 'gql-query-builder'

const query = queryBuilder({
  type: 'query',
  operation: 'thought',
  variables: { id: 1 },
  fields: ['id', 'name', 'thought']
})

console.log(query)

// Output
query ($id: Int) {
  thought (id: $id) {
    id, name, thought
  }
}

// Variables
{ "id": 1 }

Query (with nested fields selection)

import queryBuilder from 'gql-query-builder'

const query = queryBuilder({
  type: 'query',
  operation: 'orders',
  fields: [
    'id',
    'amount',
    {
     user: [
        'id',
        'name',
        'email',
        {
          address: [
            'city',
            'country'
          ]
        }
      ]
    }
  ]
})

console.log(query)

// Output
query {
  orders  {
    id, 
    amount, 
    user { 
      id, 
      name, 
      email, 
      address { 
        city, 
        country 
      } 
    }
  }
}

Query (with required variables):

import queryBuilder from 'gql-query-builder'

const query = queryBuilder({
  type: 'query',
  operation: 'userLogin',
  variables: {
    email: { value: "jon.doe@example.com", required: true },
    password: { value: "123456", required: true }
  },
  fields: ['userId', 'token']
})

console.log(query)

// Output
query ($email: String!, $password: String!) {
  userLogin (email: $email, password: $password) {
    userId, token
  }
}

// Variables
{ 
  email: "jon.doe@example.com", 
  password: "123456" 
}

Mutation:

import queryBuilder from 'gql-query-builder'

const query = queryBuilder({
  type: 'mutation', 
  operation: 'thoughtCreate', 
  variables: { 
    name: "Tyrion Lannister", 
    thought: "I drink and I know things." 
  }, 
  fields: ['id']
})

console.log(query)

// Output
mutation ($name: String, $thought: String) {
  thoughtCreate (name: $name, thought: $thought) {
    id
  }
}

// Variables
{ 
  "name": "Tyrion Lannister",
  "thought": "I drink and I know things." 
}

Mutation (with required variables):

import queryBuilder from 'gql-query-builder'

const query = queryBuilder({
  type: 'mutation',
  operation: 'userSignup',
  variables: {
    name: "Jon Doe",
    email: { value: "jon.doe@example.com", required: true },
    password: { value: "123456", required: true }
  },
  fields: ['userId']
})

console.log(query)

// Output
mutation ($name: String, $email: String!, $password: String!) {
  userSignup (name: $name, email: $email, password: $password) {
    userId
  }
}

// Variables
{
  name: "Jon Doe",
  email: "jon.doe@example.com", 
  password: "123456" 
}

Example with Axios

Query

import axios from 'axios'
import queryBuilder from 'gql-query-builder'

async function getThoughts() {
  try {
    const response = await axios.post('http://api.example.com/graphql', queryBuilder({
      type: 'query',
      operation: 'thoughts',
      fields: ['id', 'name', 'thought']
    }))
    
    console.log(response)
  } catch(error) {
    console.log(error)
  }
}

Mutation

import axios from 'axios'
import queryBuilder from 'gql-query-builder'

async function saveThought() {
  try {
    const response = await axios.post('http://api.example.com/graphql', queryBuilder({
      type: 'mutation', 
        operation: 'thoughtCreate', 
        variables: {
          name: "Tyrion Lannister", 
          thought: "I drink and I know things." 
        },
        fields: ['id']
    }))
    
    console.log(response)
  } catch(error) {
    console.log(error)
  }
}

Showcase

Following projects are using gql-query-builder

  • Crate - Get monthly subscription of trendy clothes and accessories - GitHub
  • Fullstack GraphQL Application - GitHub
  • Would really appreciate if you add your project to this list by sending a PR

Authors

  • Atul Yadav - GitHub · Twitter
  • [YOUR NAME HERE] - Feel free to contribute to the codebase by resolving any open issues, refactoring, adding new features, writing test cases or any other way to make the project better and helpful to the community. Feel free to fork and send pull requests.

If you liked this project, you can donate to support it ❤️

Donate via PayPal

License

Copyright (c) 2018 Atul Yadav http://github.com/atulmy

The MIT License (http://www.opensource.org/licenses/mit-license.php)