redux-saga-requests-graphql

GraphQL driver to Redux-Saga - addon to simplify handling of AJAX requests.

Installation

To install the package, just run:

$ yarn add redux-saga-requests-graphql

or...

$ npm install redux-saga-requests-graphql

or you can just use CDN: https://unpkg.com/redux-saga-requests-graphql.

For general usage, see redux-saga-requests docs.

Regarding GraphQL, let's assume we have the following GraphQL schema:

  type Book {
    id: ID!
    title: String!
    author: String!
    liked: Boolean!
  }
 
  type File {
    filename: String!
    mimetype: String!
    encoding: String!
  }
 
  type Query {
    books: [Book!]!
    book(id: ID!): Book
  }
 
  type Mutation {
    deleteBook(id: ID!): Book
    singleUpload(file: Upload!): File!
    multipleUpload(files: [Upload!]!): [File!]!
  }

To use this driver, just import it and pass to handleRequests, like you would do with other drivers:

import { handleRequests } from 'redux-saga-requests';
import { createDriver } from 'redux-saga-requests-graphql';
 
handleRequests({
  driver: createDriver({ url: 'http://localhost:3000/graphql' }),
});

In order to send a query, just do it in a similar fashion to other drivers. The only one thing really specific to GraphQL is a way you define your actions. Let's create an action to fetch books:

import { gql } from 'redux-saga-requests-graphql';
 
const fetchBooks = () => ({
  type: 'FETCH_BOOKS',
  request: {
    query: gql`
      {
        books {
          id
          title
          author
          liked
        }
      }
    `,
    headers: {
      SOMEHEADER: 'SOMEHEADER',
    },
  },
});

As you see, there is nothing fancy here, you just write GraphQL. Notice we wrap it in gql tag. Currently it only trims queries, but in the future it could do other stuff, so it is recommended to wrap all your queries in gql, especially that it will hint most of code editors to properly highlight them.

Now, let's fetch a specific book, which requires using variables:

const fetchBook = id => ({
  type: 'FETCH_BOOK',
  request: {
    query: gql`
      query($id: ID!) {
        book(id: $id) {
          id
          title
          author
          liked
        }
      }
    `,
    variables: { id },
  },
});

Notice Book properties repeated across those two queries. As you probably know, the answer for this problem is GraphQL fragment, which you can create like this:

const bookFragment = gql`
  fragment BookFragment on Book {
    id
    title
    author
    liked
  }
`;
 
const fetchBook = id => ({
  type: 'FETCH_BOOK',
  request: {
    query: gql`
      query($id: ID!) {
        book(id: $id) {
          ...BookFragment
        }
      }
      ${bookFragment}
    `,
    variables: { id },
  },
});

Mutations are done like queries, just use GraphQL language:

const deleteBook = id => ({
  type: 'DELETE_BOOK',
  request: {
    query: gql`
      mutation($id: ID!) {
        deleteBook(id: $id) {
          id
        }
      }
    `,
    variables: { id },
  },
});

Be aware, that all queries are executed as takeLatest, and mutations as takeEvery, see redux-saga-requests docs for more details and how to adjust it if you need it.

Upload files according to GraphQL multipart request specification, which is also used by other GraphQL clients and servers, like Apollo, is also supported.

So, to upload a single file:

const uploadFile = file => ({
  type: 'UPLOAD_FILE',
  request: {
    query: gql`
      mutation($file: Upload!) {
        singleUpload(file: $file) {
          filename
          mimetype
          encoding
        }
      }
    `,
    variables: { file },
  },
});

... or, to upload multiple files:

const uploadFiles = files => ({
  type: 'UPLOAD_FILES',
  request: {
    query: gql`
      mutation($files: [Upload!]!) {
        multipleUpload(files: $files) {
          filename
          mimetype
          encoding
        }
      }
    `,
    variables: { files },
  },
});

So, you can do it exactly in the same way like other libraries supporting GraphQL multipart request specification.

The rest works exactly the same like when using other drivers, see GraphQL example for more info if you need it.

TODO:

• handling GraphQL subscription
• possibly adding data normalization like Apollo
• adding client side directives

Licence

MIT