Community Plugin

gatsby-plugin-graphql-component

This plugin alows you to register any React component file with the build system and query them via Gatsby’s GraphQL queries.

Example usage

using pageQuery

// src/pages/test.js
import { graphql, Link } from "gatsby"
import React from "react"
export const pageQuery = graphql`
  query {
    Tester
    allSitePage {
      edges {
        node {
          id
        }
      }
    }
  }
`
export default (props) => {
  const { Tester } = props.data

  return <Tester></Tester>
}

using useStaticQuery hook

// src/components/test.js
import { graphql, useStaticQuery } from "gatsby"
import React from "react"
export default (props) => {
  const { Tester } = useStaticQuery(graphql`
    query {
      Tester
      allSitePage {
        edges {
          node {
            id
          }
        }
      }
    }
  `)
  return <Tester></Tester>
}

using <StaticQuery/> component

// src/components/test.js
import React from "react"
import { StaticQuery, graphql } from "gatsby"
export default (props) => (
  <StaticQuery
    query={graphql`
      query {
        Tester
      }
    `}
  >
    {(data) => {
      return <data.Tester></data.Tester>
    }}
  </StaticQuery>
)

Installation

npm i gatsby-plugin-graphql-component

After installing gatsby-plugin-graphql-component you can add it to your plugins list in your gatsby-config.js.

module.exports = {
  plugins: [
    // ...
    `gatsby-plugin-graphql-component`,
  ],
}

Usage for plugin creators

The component file needs to be registered with the plugin by creating a Component node. The plugin exports a createComponentNode function which you should call during the sourceNodes build phase. As a side effect, the component is added to the webpack’s build. Then you can extend the schema with createResolverField function during the createResolvers which will enable the component in the queries.

const { registerComponent, createResolverField } = require(`gatsby-plugin-graphql-component`)

exports.sourceNodes = async ({actions: {createNode}) => {

  const id = await registerComponent({
    component: require.resolve(`./src/components/tester`)
  })

  // store this id somewhere for later (preferably in the sourced node as a field when using `createNode` or `createNodeField`)
}

exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    Query: {
      // create Tester field on root Query which using the `createResolverField` helper function
      // it takes resolve as an argument which is an async function which should return the id returned from `registerComponent`
      Tester: createResolverField({ resolve: async (source, args, context, info) => source.idReturnedFromRegisterComponent }),
    },
  }
  createResolvers(resolvers)
}

Supported features

server side rendering
hot reloading
query refreshing during development

How is bundle size affected

Each individual component is treated in its own webpack chunk, similar as pages are, so only the components which are included in the queries, are loaded on initial page bootstrap alongside with the page data.

License

MIT