$ npm install gatsby-source-graphql
Plugin for connecting arbitrary GraphQL APIs to Gatsby GraphQL. Remote schemas are stitched together by adding a type that wraps the remote schema Query type and putting it under field of Gatsby GraphQL Query.
npm install --save gatsby-source-graphql
First, you need a way to pass environment variables to the build process, so secrets and other secured data aren't committed to source control. We recommend using dotenv
which will then expose environment variables. Read more about dotenv and using environment variables here. Then we can use these environment variables and configure our plugin.
// In your gatsby-config.js
module.exports = {
plugins: [
// Simple config, passing URL
{
resolve: "gatsby-source-graphql",
options: {
// This type will contain remote schema Query type
typeName: "SWAPI",
// This is field under which it's accessible
fieldName: "swapi",
// Url to query from
url: "https://api.graphcms.com/simple/v1/swapi",
},
},
// Passing parameters (passed to apollo-link)
{
resolve: "gatsby-source-graphql",
options: {
typeName: "GitHub",
fieldName: "github",
// Url to query from
url: "https://api.github.com/graphql",
// HTTP headers
headers: {
// Learn about environment variables: https://gatsby.dev/env-vars
Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
},
// Additional options to pass to node-fetch
fetchOptions: {},
},
},
// Creating arbitrary Apollo Link (for advanced situations)
{
resolve: "gatsby-source-graphql",
options: {
typeName: "GitHub",
fieldName: "github",
// Create Apollo Link manually. Can return a Promise.
createLink: (pluginOptions) => {
return createHttpLink({
uri: 'https://api.github.com/graphql',
headers: {
'Authorization': `bearer ${process.env.GITHUB_TOKEN}`,
},
fetch,
})
},
},
],
}
{
# Field name parameter defines how you can access third party api
swapi {
allSpecies {
name
}
}
github {
viewer {
email
}
}
}
By default schema is introspected from the remote schema. Schema is cached in .cache
in this case and refreshing the schema requires deleting the cache.
To control schema consumption, you can alternatively construct schema definition by passing createSchema
callback. This way you could, for example, read schema SDL or introspection JSON. When createSchema
callback is used, schema isn't cached. createSchema
can return a Promise to GraphQLSchema instance or GraphQLSchema instance.
const fs = require("fs")
const { buildSchema, buildClientSchema } = require("graphql")
module.exports = {
plugins: [
{
resolve: "gatsby-source-graphql",
options: {
typeName: "SWAPI",
fieldName: "swapi",
url: "https://api.graphcms.com/simple/v1/swapi",
createSchema: async () => {
const json = JSON.parse(
fs.readFileSync(`${__dirname}/introspection.json`)
)
return buildClientSchema(json.data)
},
},
},
{
resolve: "gatsby-source-graphql",
options: {
typeName: "SWAPI",
fieldName: "swapi",
url: "https://api.graphcms.com/simple/v1/swapi",
createSchema: async () => {
const sdl = fs.readFileSync(`${__dirname}/schema.sdl`).toString()
return buildSchema(sdl)
},
},
},
],
}
By default, gatsby-source-graphql
will only refetch the data once the server is restarted. It's also possible to configure the plugin to periodically refetch the data. The option is called refetchInterval
and specifies the timeout in seconds.
module.exports = {
plugins: [
// Simple config, passing URL
{
resolve: "gatsby-source-graphql",
options: {
// This type will contain remote schema Query type
typeName: "SWAPI",
// This is field under which it's accessible
fieldName: "swapi",
// Url to query from
url: "https://api.graphcms.com/simple/v1/swapi",
// refetch interval in seconds
refetchInterval: 60,
},
},
],
}
© 2010 - cnpmjs.org x YWFE | Home | YWFE