All Projects → wyze → gatsby-source-graphql

wyze / gatsby-source-graphql

Licence: MIT license
A Gatsby source plugin for pulling in data from GraphQL APIs.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to gatsby-source-graphql

gatsby-source-moltin
🚀 Gatsby source plugin for building Elastic Path Commerce Cloud powered eCommerce websites
Stars: ✭ 21 (+40%)
Mutual labels:  gatsby-plugin
gatsby-remark-embedded-codesandbox
A Gatsby Remark plugin for embedding Codesandbox given a folder of files
Stars: ✭ 31 (+106.67%)
Mutual labels:  gatsby-plugin
gatsby-remark-design-system-example
Example page for "gatsby-remark-design-system"
Stars: ✭ 13 (-13.33%)
Mutual labels:  gatsby-plugin
gatsby-plugin-dynamic-routes
Creating dynamic routes based on your environment and/or renaming existing routes
Stars: ✭ 14 (-6.67%)
Mutual labels:  gatsby-plugin
chandrikadeb7.github.io
Personal portfolio website hosted using GitHub Pages - Version 2
Stars: ✭ 99 (+560%)
Mutual labels:  gatsby-plugin
gatsby-plugin-gtag
Gatsby plugin to add Google Analytics gtag.js (replacement for analytics.js) to a site.
Stars: ✭ 28 (+86.67%)
Mutual labels:  gatsby-plugin
gatsby-plugin-optimize-svgs
A Gatsby Plugin to minify SVGs output to the filesystem during the build.
Stars: ✭ 39 (+160%)
Mutual labels:  gatsby-plugin
gatsby-plugin-scroll-indicator
A visual indicator of page scroll on Gatsby websites
Stars: ✭ 14 (-6.67%)
Mutual labels:  gatsby-plugin
gatsby-plugin-matomo
🥂 Gatsby plugin to add Matomo (formerly Piwik) onto a site.
Stars: ✭ 56 (+273.33%)
Mutual labels:  gatsby-plugin
gatsby-remark-numbered-footnotes
A small plugin to change named footnotes to numbered footnotes in your Gatsby pages using Markdown.
Stars: ✭ 15 (+0%)
Mutual labels:  gatsby-plugin
gatsby-theme-deck-n-blog
Create a deck (with mdx-deck) and a blog post from the same MDX
Stars: ✭ 17 (+13.33%)
Mutual labels:  gatsby-plugin
gatsby-theme-nehalem
A Gatsby blog theme.
Stars: ✭ 168 (+1020%)
Mutual labels:  gatsby-plugin
gatsby-remark-relative-images
Convert markdown image src(s) to be relative for gatsby-remark-images.
Stars: ✭ 79 (+426.67%)
Mutual labels:  gatsby-plugin
gatsby-theme-gallery
🏞 A Gatsby Theme for adding a gallery to your site.
Stars: ✭ 40 (+166.67%)
Mutual labels:  gatsby-plugin
gatsby-plugin-gdpr-cookies
Gatsby plugin to add Google Analytics (V4 is supported), Google Tag Manager, Facebook Pixel, TikTok Pixel and Hotjar in a GDPR form to your site.
Stars: ✭ 88 (+486.67%)
Mutual labels:  gatsby-plugin
gatsby-plugin-disqus
💬 A plugin for adding Disqus comments to GatsbyJS
Stars: ✭ 40 (+166.67%)
Mutual labels:  gatsby-plugin
gatsby-remark-highlight-code
Adds stylish cards and syntax highlighting to code blocks in markdown files
Stars: ✭ 63 (+320%)
Mutual labels:  gatsby-plugin
gatsby-remark-images-grid
Use css grid layouts in markdown
Stars: ✭ 22 (+46.67%)
Mutual labels:  gatsby-plugin
gatsby-transformer-remark-frontmatter
Allows querying frontmatter fields as markdown with gatsby
Stars: ✭ 13 (-13.33%)
Mutual labels:  gatsby-plugin
gatsby-pantry
Gatsby Plugin Pantry 🤤
Stars: ✭ 23 (+53.33%)
Mutual labels:  gatsby-plugin

@wyze/gatsby-source-graphql

Build Status npm Codecov.io

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

// 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',
      },
    },
  ]
}
# 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:

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 where you can understand how to setup this plugin in your Gatsby Project.

Change Log

Full Change Log

v1.2.0 (2018-07-27)

  • [ac57b7ab69] - Rename package under my named scope (Neil Kistner)
  • [befa28c85f] - Allow the use of a mapper function between results and nodes (#6) (Judah Anthony)

License

MIT © Neil Kistner

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].