Registry / devops / gatsby-plugin-graphql-loader

gatsby-plugin-graphql-loader

library1.0.2jsnpmunverified

A Gatsby plugin (v1.0.2, last release) that enables loading .graphql and .gql files directly in your Gatsby project by leveraging apollographql/graphql-tag/loader. It processes queries at build time, reducing runtime overhead, and integrates seamlessly with Gatsby's webpack configuration. Main differentiator: no runtime parsing needed, unlike alternatives that use gql tag in source code.

devops

npm install gatsby-plugin-graphql-loader

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GATSBY-PLUGIN-GRAP

gatsby-plugin-graphql-loader

devopsjavascriptv1.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

gatsby-plugin-graphql-loader

✓ // gatsby-config.js module.exports = { plugins: ['gatsby-plugin-graphql-loader'] }

✗ import gatsby-plugin-graphql-loader from 'gatsby-plugin-graphql-loader'

The plugin is added to gatsby-config.js, not imported in components.

Shows how to add the plugin to gatsby-config.js and import a .graphql file directly in a component, avoiding the graphql tag.

// gatsby-config.js module.exports = { plugins: ['gatsby-plugin-graphql-loader'] }; // src/components/hello.graphql query Hello { site { siteMetadata { title } } } // src/pages/index.js import React from 'react'; import { useStaticQuery, graphql } from 'gatsby'; import query from './hello.graphql'; const IndexPage = () => { const data = useStaticQuery(graphql` query SiteTitle { site { siteMetadata { title } } } `); return <div>{data.site.siteMetadata.title}</div>; }; export default IndexPage;

Debug

Known issues

deprecatedPlugin has no recent updates and may not work with Gatsby v3+.

fix

Consider using gatsby-plugin-graphql-config or inline graphql tags with graphql-tag.

affects: >=1.0.0

gotchaThe plugin requires installing graphql-tag as a peer dependency.

fix

Ensure 'graphql-tag' is in your dependencies: npm install graphql-tag.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'graphql-tag'

Missing peer dependency graphql-tag.

fix

npm install graphql-tag

Upgrade

Version history

1.0.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubssh://git@github.com/NWRichmond/gatsby-plugin-graphql-loader ↗

packagegatsby-plugin-graphql-loader ↗

homepagehttps://github.com/NWRichmond/gatsby-plugin-graphql-loader#readme ↗