wyze/gatsby-source-graphql

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

@wyze/gatsby-source-graphql

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

gatsby-source-graphql's Issues

Is this compatible with GatsbyJS v2?

We started a new project with the beta of Gatsby v2, but we're not seeing any nodes get created with this plugin like we did in our GatsbyJS v1 app. Do you know what will need to change with this plugin to work in the next version of Gatsby?

GraphQL Error Unknown field that happens randomly

Hi,

Since I started to user gatsby-source-graphql, I've noticed that when I first try to start the dev environment (gatsby develop, followed by gatsby clean to clear cache), occasionally and regardless of any code changes, I get:

`GraphQL Error Encountered 2 error(s):

• Unknown field 'wpcms' on type 'Query'. Source: document`

For example, today I started the project and had to repeat: gatsby clean && gatsby develop, several times until it starts working. I'm fetching data from a remote GraphQL and not the local or md files, etc. Checked the remote GraphQl and is always fully working (tested with HTTP Post requests sending the query + variables, returns data absolutely fine); then checked the local __graphpql and could not find the remote GraphQL.

Here's a youtube video where I demonstrate the issue ( https://youtu.be/2uniflq5I-Q )

Tried to clone the package locally to debut but it doesn't build:

git clone [email protected]:wyze/gatsby-source-graphql.git
cd gatsby-source-graphql/
npm i -D microbundle node-fetch tslib

npm run build

@wyze/[email protected] prebuild /Users/Helder/www/gatsby-source-graphql
yarn clean

yarn clean v0.27.5
warning ../package.json: No license field
[1/2] Creating ".yarnclean"...
[2/2] Cleaning modules...
info Removed 0 files
info Saved 0 MB.
Done in 1.14s.

@wyze/[email protected] build /Users/Helder/www/gatsby-source-graphql
microbundle --sourcemap false --format cjs

The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
Error: /Users/Helder/www/gatsby-source-graphql/src/utils/create-content-digest.ts(1,25): semantic error TS2307 Cannot find module 'crypto'.

node v11.1.0 (tried 8 etc)
npm 6.9.0

Add support for options by source name

Taking the example from the readme and modifying it like so:

    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'queries',
        path: `${__dirname}/src/queries/`,
      },
    },
    {
      resolve: 'gatsby-source-graphql',
      options: {
+       queries: {
+         url: 'https://www.graphqlhub.com/graphql',
+       },
        headers: {
          authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
        },
        url: 'https://api.github.com/graphql',
      },
    },

The new options would have the url of https://www.graphqlhub.com/graphql and not contain the headers from the global options.

Workflow should be to look for the options by name from the source, in this case queries. If not found, fall back to the global options.

Could be an option to opt-in for merging in the global options in the future.

Only returning 100 data points

Using this plugin to pull data from our db but noticed it only returns 100 results from each query. How do I increase this limit?

ERROR #11321 PLUGIN fetcher is not a function

ERROR #11321 PLUGIN

"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:

fetcher is not a function

79 |
80 | if (!sdl) {

81 | introspectionSchema = await introspectSchema(link);
| ^
82 | sdl = printSchema(introspectionSchema);
83 | } else {
84 | introspectionSchema = buildSchema(sdl);

File: node_modules/gatsby-source-graphql/gatsby-node.js:81:35

TypeError: fetcher is not a function

• introspectSchema.js:14 introspectSchema
  [vide]/[graphql-tools-fork]/dist/stitch/introspectSchema.js:14:12

• gatsby-node.js:81 Object.exports.sourceNodes
  [vide]/[gatsby-source-graphql]/gatsby-node.js:81:35

Managing JWT Refresh

{
        resolve: "gatsby-source-graphql",
        options: {
          // This type will contain remote schema Query type
          typeName: "SWAPI",
          // This is the field under which it's accessible
          fieldName: "swapi",
          // URL to query from
          url: "https://api.graphcms.com/simple/v1/swapi",
          headers: {
            Authorization: `Bearer ${process.env.SWAPI_TOKEN}`,
          },
        },
      },

tokens expire. How would someone rotate a JWT with this pattern? If I can get help figuring it out I am happy to document it and make a PR.

Add options table to readme

Should display a list of options/types/description in readme.

Add support for variables per query

The best approach here would be an option keyed by the filename that the variables would map to. So given the example from the readme:

    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'queries',
        path: `${__dirname}/src/queries/`,
      },
    },
    {
      resolve: 'gatsby-source-graphql',
      options: {
        headers: {
          authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
        },
        url: 'https://api.github.com/graphql',
+       variables: {
+         github: {
+           username: 'wyze',
+         },
+       },
      },
    }

So then when the plugin fires off a query found in queries folder with a filename of github.graphql, it will set the variables to the addition above.

Any way to pass dynamic arguments

Hello!,

Im using this plugin to consume an external GraphQL server. In my graphQL server i have queries with Arguments. So in Gatsby i have for example my article.graphql file but i tried so many options for pass arguments without success.

# src/queries/article.graphql
{
    article($nid: String!) {
        nodeById(id: $id) {
            id
            title
            body {
                value
            }
        }
    }
}

but doesn't works, can someone tell me the way to do this ?

If i do this with a hardcode value works:

# src/queries/article.graphql
{
  nodeById(id: "1") {
    id
    title
    body {
        value
    }
  }
}

GraphQL Error Unknown field `viewer` on type `RootQueryType`

Hi,

I am trying to setup a sample project to test the GraphQL API Integration based on the steps in README file of this plugin and getting below error:

GraphQL Error Unknown field `viewer` on type `RootQueryType`

  file: /Users/dev/gatsby-source-graphql-usage/src/pages/index.js

   1 |
   2 | query RepositoriesQuery {
>  3 |   viewer {
     |   ^
   4 |     repositories(privacy: PUBLIC, affiliations: OWNER, isFork: false, first: 100) {
   5 |       nodes {
   6 |         name
   7 |         url
   8 |       }
   9 |     }
  10 |   }
  11 | }
  12 |

You can find the code of this example here: https://github.com/gouravsood/gatsby-source-graphql-usage

Can you please help?