{"id":47731,"library":"gatsby-plugin-graphql-loader","title":"gatsby-plugin-graphql-loader","description":"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.","status":"deprecated","version":"1.0.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/NWRichmond/gatsby-plugin-graphql-loader","tags":["javascript","gatsby","gatsby-plugin","graphql","gql","loader"],"install":[{"cmd":"npm install gatsby-plugin-graphql-loader","lang":"bash","label":"npm"},{"cmd":"yarn add gatsby-plugin-graphql-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add gatsby-plugin-graphql-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The plugin is added to gatsby-config.js, not imported in components.","wrong":"import gatsby-plugin-graphql-loader from 'gatsby-plugin-graphql-loader'","symbol":"gatsby-plugin-graphql-loader","correct":"// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-plugin-graphql-loader']\n}"}],"quickstart":{"code":"// gatsby-config.js\nmodule.exports = {\n  plugins: ['gatsby-plugin-graphql-loader']\n};\n\n// src/components/hello.graphql\nquery Hello {\n  site {\n    siteMetadata {\n      title\n    }\n  }\n}\n\n// src/pages/index.js\nimport React from 'react';\nimport { useStaticQuery, graphql } from 'gatsby';\nimport query from './hello.graphql';\n\nconst IndexPage = () => {\n  const data = useStaticQuery(graphql`\n    query SiteTitle {\n      site {\n        siteMetadata {\n          title\n        }\n      }\n    }\n  `);\n  return <div>{data.site.siteMetadata.title}</div>;\n};\n\nexport default IndexPage;","lang":"javascript","description":"Shows how to add the plugin to gatsby-config.js and import a .graphql file directly in a component, avoiding the graphql tag."},"warnings":[{"fix":"Consider using gatsby-plugin-graphql-config or inline graphql tags with graphql-tag.","message":"Plugin has no recent updates and may not work with Gatsby v3+.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure 'graphql-tag' is in your dependencies: npm install graphql-tag.","message":"The plugin requires installing graphql-tag as a peer dependency.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'altern':51 'apollographql/graphql-tag/loader':26 'build':31 'code':58 'configur':43 'differenti':45 'direct':19 'enabl':13 'file':18 'gatsbi':2,7,22,40,60,62 'gatsby-plugin':61 'gatsby-plugin-graphql-load':1 'gql':17,54,65 'graphql':4,15,64 'integr':37 'javascript':59 'last':10 'leverag':25 'load':14 'loader':5,66 'main':44 'need':49 'overhead':35 'pars':48 'plugin':3,8,63 'process':28 'project':23 'queri':29 'reduc':33 'releas':11 'runtim':34,47 'seamless':38 'sourc':57 'tag':55 'time':32 'unlik':50 'use':53 'v1.0.2':9 'webpack':42","created_at":"2026-06-07T16:53:00.378661+00:00","updated_at":"2026-06-07T16:53:00.378661+00:00","problems":[{"fix":"npm install graphql-tag","cause":"Missing peer dependency graphql-tag.","error":"Cannot find module 'graphql-tag'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/NWRichmond/gatsby-plugin-graphql-loader#readme","github":"ssh://git@github.com/NWRichmond/gatsby-plugin-graphql-loader","docs":null,"changelog":null,"pypi":null,"npm":"gatsby-plugin-graphql-loader","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}