graphoon

graphoon

Quering GraphQL service never been so simple.

Table of contents

• Installation
• Usage
• • Query
• • Mutation
• • setHeaders
• • setUri
• • Errors
• • Promises

Installation

NPM:

npm install --save graphoon

YARN:

yarn add graphoon

Usage

Query

Simple query.

import { query, q } from "graphoon";

(async function() {
  const id = 10;

  const { user, roles } = await query`
    user(id: ${id}) {
      id
      name
      surname
      role {
        id
      }
    }

    roles {
      id
      title
    }
  `;

  // user variable can look like this:
  // {
  //   id: 10,
  //   name: 'John',
  //   surname: 'White',
  //   role: {
  //     id: 1
  //   }
  // }

  // roles variable can look like this:
  // [
  //   {id: 1, title: 'Admin'},
  //   {id: 2, title: 'Developer'},
  //   {id: 3, title: 'Reporter'}
  // ]

  const { profiles } = await q(`
    profiles(userId: ${id}) {
      id
      type
      active
    }
  `);

  // profiles variable can look like this:
  // [
  //   {id: 1, type: 'common', active: true},
  //   {id: 2, type: 'custom', active: false}
  // ]
})();

Mutation

Mutating data on server.

import { mutation, m } from "graphoon";

(async function() {
  const id = 10;
  const name = "Rose";
  const surname = "Mary";

  const { updateUser } = await mutation`
    updateUser(id: ${id}, data: {
      name: ${name},
      surname: ${surname}
    }) {
      id
      name
      surname
      role {
        id
      }
    }
  `;

  // updateUser variable can look like this:
  // {
  //   id: 10,
  //   name: 'Rose',
  //   surname: 'Mary',
  //   role: {
  //     id: 1
  //   }
  // }

  const roleName = "admin";
  const { updateRole } = await m(`
    updateRole(id: ${id}, data: {
      name: ${roleName}
    }) {
      id
      name
    }
  `);

  // updateRole variable can look like this:
  // {
  //   id: 1,
  //   name: 'admin'
  // }
})();

setHeaders

Providing custom headers.

import { setHeaders } from "graphoon";

setHeaders({
  authorization: "bearer my_sweet_sweet_token",
  another_header: "another_value"
});

Method setHeaders changes configuration permanently for every query/mutation that will be called after calling this methods. So if you need, for example, customize your queries with some AUTH data, you can use setHeaders method only once.

setUri

Changing endpoind url from default /graphql to anything else.

import { setUri } from "graphoon";

setUri("/my_sweet_endpoint");

Methods setUri changes configuration permanently for every query/mutation that will be called after calling this methods. So if you need, for example, change your endpoint from /graphql to /gql you can use setUri method only once.

Errors

You can use trycatch to handle errors that occure inside GraphQL body. All error messages will be enumerated via ; symbol.

import { query } from "graphoon";

(async function() {
  try {
    const id = 10;

    const { profiles } = await q(`
      profiles(userId: ${id}) {
        id
        type
        active
      }
    `);
  } catch (error) {
    console.error(error.message);
  }
})();

Promises

You can use methods q and m to work with promises.

import { q, m } from "graphoon";

const id = 10;

q(`profiles(userId: ${id}) {
    id
    type
    active
  }`)
  .then(({ profiles }) => {
    // work with profiles here
  })
  .catch(error => {
    console.error(error.message);
  });

const roleName = "admin";

m(`updateRole(id: ${id}, data: {
    name: ${roleName}
  }) {
    id
    name
  }`)
  .then(({ updateRole }) => {
    // work with updated role here
  })
  .catch(error => {
    console.error(error.message);
  });