https://github.com/wyze/gatsby-source-graphql

A Gatsby source plugin for pulling in data from GraphQL APIs.
https://github.com/wyze/gatsby-source-graphql

gatsby gatsby-plugin graphql typescript

Last synced: 15 days ago
JSON representation

A Gatsby source plugin for pulling in data from GraphQL APIs.

• Host: GitHub
• URL: https://github.com/wyze/gatsby-source-graphql
• Owner: wyze
• License: mit
• Created: 2018-05-06T15:07:17.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T19:13:14.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T04:17:56.327Z (about 1 month ago)
• Topics: gatsby, gatsby-plugin, graphql, typescript
• Language: TypeScript
• Homepage: https://yarn.pm/@wyze/gatsby-source-graphql
• Size: 837 KB
• Stars: 15
• Watchers: 5
• Forks: 4
• Open Issues: 20
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: license

Awesome Lists containing this project

• awesome-list - gatsby-source-graphql

README

        
# @wyze/gatsby-source-graphql

[![Build Status][travis-image]][travis-url]

[![npm][npm-image]][npm-url]

[![Codecov.io][codecov-image]][codecov-url]

> A Gatsby source plugin for pulling in data from GraphQL APIs.

## Installation

### Yarn

```

$ yarn add @wyze/gatsby-source-graphql

```

### npm

```

$ npm install --save @wyze/gatsby-source-graphql

```

## Usage

### With `gatsby-source-filesystem`

```js

// gatsby-config.js

// Optionally pull in environment variables

require('dotenv').config({

  path: `.env.${process.env.NODE_ENV}`,

});

module.exports = {

  // ...

  plugins: [

    {

      resolve: 'gatsby-source-filesystem',

      options: {

        name: 'queries',

        path: `${__dirname}/src/queries/`,

      },

    },

    {

      resolve: '@wyze/gatsby-source-graphql',

      options: {

        headers: {

          authorization: `Bearer ${process.env.GITHUB_TOKEN}`,

        },

        url: 'https://api.github.com/graphql',

      },

    },

  ]

}

```

```graphql

# src/queries/github.graphql

{

  viewer {

    name

    url

  }

}

```

### How to query

Given the above example with a GraphQL file named `github.graphql`, you would query Gatsby like so:

```graphql

query GitHubViewerQuery {

  githubGraphQl {

    viewer {

      name

      url

    }

  }

}

```

### Sample Gatsby project integrated using @wyze/gatsby-source-graphql

Alternatively, you can find a working sample project [gatsby-source-graphql-usage](https://github.com/gouravsood/gatsby-source-graphql-usage) where you can understand how to setup this plugin in your Gatsby Project.

## Change Log

> [Full Change Log](changelog.md)

### [v1.2.0](https://github.com/wyze/gatsby-source-graphql/releases/tag/v1.2.0) (2018-07-27)

* [[`ac57b7ab69`](https://github.com/wyze/gatsby-source-graphql/commit/ac57b7ab69)] - Rename package under my named scope (Neil Kistner)

* [[`befa28c85f`](https://github.com/wyze/gatsby-source-graphql/commit/befa28c85f)] - Allow the use of a mapper function between results and nodes (#6) (Judah Anthony)

## License

MIT © [Neil Kistner](//neilkistner.com)

[travis-image]: https://img.shields.io/travis/wyze/gatsby-source-graphql.svg?style=flat-square

[travis-url]: https://travis-ci.org/wyze/gatsby-source-graphql

[npm-image]: https://img.shields.io/npm/v/@wyze/gatsby-source-graphql.svg?style=flat-square

[npm-url]: https://npmjs.com/package/@wyze/gatsby-source-graphql

[codecov-image]: https://img.shields.io/codecov/c/github/wyze/gatsby-source-graphql.svg?style=flat-square

[codecov-url]: https://codecov.io/github/wyze/gatsby-source-graphql