Giter VIP home page Giter VIP logo

graphql-directive-rest's Introduction

graphql-directive-rest

Version downloads PRs Welcome MIT License

Introduction

GraphQL is often used to integrate applications with REST API. Using this directive allows you to make REST integrations without creating any resolvers ๐ŸŽ‰ ๐Ÿ˜ฎ

Table of Contents

Installation

yarn add graphql-directive-rest

This package requires graphql and graphql-tools as peer dependency

Usage

Standard approach, without the @rest directive

const { makeExecutableSchema } = require('graphql-tools');
const restDirective = require('../index');
const fetch = require('node-fetch');

const typeDefs = `
  type User {
    login: String
    avatar_url: String
  }

  type Me {
    gender: String
    email: String
    admin: String 
  }

  type Query {
    me(gender: String): Me
    users: [User]
    user(user: String): User
  }
`;

const resolvers = {
  Query: {
    me: (_, args) =>
      fetch(`https://randomuser.me/api/?gender=${args.gender}`)
        .then(res => res.json())
        .then(data => data.results[0]),
    users: () => fetch('https://api.github.com/users').then(res => res.json()),
    user: (_, args) =>
      fetch(`https://api.github.com/users/${args.user}`).then(res =>
        res.json()
      ),
  },
  Me: {
    admin: () =>
      fetch('https://yesno.wtf/api')
        .then(res => res.json())
        .then(data => data.answer),
  },
};

module.exports = makeExecutableSchema({
  typeDefs,
  resolvers,
  schemaDirectives: {
    rest: restDirective,
  },
});

`;

const resolvers

module.exports = makeExecutableSchema({
  typeDefs,
  schemaDirectives: {
    rest: restDirective,
  },
});

Using @rest directive

When using @rest directive, we don't need to write any resolvers ๐ŸŽ‰

const { makeExecutableSchema } = require('graphql-tools');
const restDirective = require('../index');

const GITHUB_URL = 'https://api.github.com';
const USER_URL = 'https://randomuser.me/api';
const ADMIN_URL = 'https://yesno.wtf/api';

const typeDefs = `
  type User {
    login: String
    avatar_url: String
  }

  type Me {
    gender: String
    email: String
    admin: String @rest(url: "${ADMIN_URL}" extractFromResponse: "answer")
  }

  type Query {
    me(gender: String): Me @rest(url: "${USER_URL}/?gender=$gender" extractFromResponse: "results[0]")
    users: [User] @rest(url: "${GITHUB_URL}/users")
    user(user: String): User @rest(url: "${GITHUB_URL}/users/$user")
  }
`;

module.exports = makeExecutableSchema({
  typeDefs,
  schemaDirectives: {
    rest: restDirective,
  },
});

Warning! Directive overwrites your resolvers if they're defined

Example queries:

query {
  users {
    login
    avatar_url
  }
}
query($user: String) {
  user(user: $user) {
    login
    avatar_url
  }
}
query($gender: String) {
  me(gender: $gender) {
    gender
    email
    admin
  }
}

Directive Parameters

Directive params:

url: String required

Endpoint from where we want to get the data.

extractFromResponse: String

The path where is the data that we want to get.

Response:

{
  "results": [
    {
      "gender": "male",
      "name": {
        "title": "mr",
        "first": "Elon",
        "last": "ons"
      }
    }
  ]
}

Examples of usage extractFromResponse

To get the title: "results[0].name.title" or to get the gender: "results[0].gender"

Contributing

I would love to see your contribution. โค๏ธ

For local development (and testing), all you have to do is to run yarn and then yarn dev. This will start the Apollo server and you are ready to contribute ๐ŸŽ‰

Run yarn test (try --watch flag) for unit tests (we are using Jest)

LICENSE

The MIT License (MIT) 2018 - Luke Czyszczonik - mailto:[email protected]

graphql-directive-rest's People

Contributors

czystyl avatar gawrysiak avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.