Couple of functions in JS to speed up development and give some help with:

• A GraphQl Query Builder
• A GraphQl Mutation Builder

Table Of Contents

• Installation
• Usage
  • Query Builder
  • Mutation Builder
• Advanced Usage
• Using for real
• Contribute

Installation

npm i -s @yoonit/utils

Usage

We used a functional technique called currying at the main constructor function, this means that we pass a subset of arguments and each function returns a function that uses the next subset of arguments.

The first parameters is a string and its the the endpoint name (such as 'getUsers'), it returns the function that uses the next parameter, the arguments object. This function will build the arguments body for your query/mutation and will return another function. This third function uses the third parameter you need to pass, the expected response fields. This will build the response filds and will return you query/mutation ready to use. You can use the builders without a arguments object, but you need to pass the endpoint name and the response fields, otherwise it will return false and a warning.

Parameters:

• Endpoint Name e.g., 'getUsers'
• Object parameters e.g., '{ value: 'value' }'
• Expected response fields e.g, 'status', 'message'

Query Builder

import { graphql } from '@yoonit/utils'

const query = graphql.query('getUsers')({ value: 'value', valueTwo: 123 })('status', 'message', 'messageTwo')

Output

query {
  getUsers (
    value: "value",
    valueTwo: 123,
  ){
    status,
    message,
    messageTwo
  }
}

Mutation Builder

import { graphql } from '@yoonit/utils'

const mutation = graphql.mutation('createUser')(name: 'Mutation', surname: 'Builder')('status', 'message')

Output

mutation {
  createUser (
    name: "Mutation",
    surname: "Builder"
  ){
    status,
    message
  }
}

Advanced Usage

Our builders also suports nested response fields and arrays on arguments object, see beelow how to use it:

import { graphql } from '@yoonit/utils'

const mutation = graphql.mutation('createUser')({ value: ['value', '123', 'John Doe']})('status', 'message', { 'messageTwo': ['messageTitle', 'messageBody', { 'messageAlt': 'test' }, { 'messageAtt': ['att1', 'att2'] }]})

Output

mutation {
  createUser (
    value: [
      'value',
      '123',
      'John Doe'
    ],
  ){
    status,
    message,
    messageTwo {
      messageTitle,
      messageBody,
      messageAlt {
        test
      },
      messageAtt {
        att1,
        att2
      }
    }
  }
}

Using it for real

You can use it with js fetch or any other HTTP client you like. See below how to use it with Fetch

import { graphql } from '@yoonit/utils'

const body = graphql.mutation('createUser')({value: ['value', '123', 'John Doe'] })('status', 'message', { 'messageTwo': ['messageTitle', 'messageBody', { 'messageAlt': 'test' }, { 'messageAtt': ['att1', 'att2'] }]})

fetch('http://yourapi:5000', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body // Use the builder response here, as your body :) 
  })
})

To contribute and make it better

Clone the repo, change what you want and send PR. For commit messages we use Conventional Commits.

Contributions are always welcome!

Code with ❤ by the Yoonit Team