Skip to content

Gatsby plugin for sourcing data from external GraphQl endpoint

Notifications You must be signed in to change notification settings

NathHorrigan/gatsby-plugin-graphql

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Gatsby Plugin GraphQl! 🚀

Gatsby plugin for sourcing data from external GraphQl endpoints


Table of Contents (click to expand)

Features

  • Simple configuration (& code if you want to build ontop of this).
  • Support for configuring all fetch options to support things like Authentication.
  • No weird pre/post fixes on type names; fully customizable!
  • Option to transform node data before gatsby gets hold of it.

💾 Installation

NPM:

npm install --save gatsby-plugin-graphql

Yarn:

yarn add gatsby-plugin-graphql

▶️ Usage

gatsby-config.js:
module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-graphql',
      options: {
        endpoint: 'https://api.graphcms.com/simple/v1/swapi',
        typePrefix: '', // OPTIONAL: set a prefix for each GQL type.
        fetchOptions: {}, // OPTIONAL: Custom options for fetch
        queries: [{
          type: 'persons',
          path: `${__dirname}/src/queries/persons.graphql`,
          extractKey: 'persons', // OPTIONAL: Used to extra the data from the graphql JSON response (Example: { persons: [...] }). Usefull if you want your type to named different to the type name from the endpoint.
          transform: data => ({ ...data, isStarwarsCharacter: true })  // OPTIONAL: Used to mutate the GQL node data. It is called with each node before it is passed to gatsby's createNode function.
        }]
      },
    }
  ],
}
gatsby-site/src/queries/starwars.graphql:
query StarwarsChars { 
    allPersons {
        name
        species {
            name
        }
        homeworld {
            name
        }
    }
}
gatsby-site/src/pages/index.js:
import React from "react";

export default ({data: { starwars }}) => {
    return (
      <div>
        <h2>Starwars Characters</h2>
        <ul>
          {starwars.allPersons.edges.map(person => (
            <li>{person.name}</li>
          ))}
        </ul>
      </div>
    )
}

export const query = graphql`
  query StarwarsChars {
    allPersons {
      edges {
        node {
          name
          species {
              name
          }
          homeworld {
              name
          }
        }
      }
    }
  }
`

🎓 License

MIT

About

Gatsby plugin for sourcing data from external GraphQl endpoint

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published