feat: load graphql files with graphql-tag/loader

hashicorp · Jan 18, 2023 · 9a33aa9 · 9a33aa9
1 parent 949a1fa
commit 9a33aa9
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 9 deletions.
diff --git a/.changeset/little-rules-invent.md b/.changeset/little-rules-invent.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/platform-nextjs-plugin': minor
+---
+
+Use graphql-tag/loader to support #import statements in graphql files
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/nextjs-plugin/package.json b/packages/nextjs-plugin/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "@hashicorp/next-optimized-images": "0.2.0",
     "@next/bundle-analyzer": "10.0.3",
+    "graphql-tag": "^2.12.6",
     "imagemin-mozjpeg": "9.0.0",
     "imagemin-optipng": "8.0.0",
     "imagemin-svgo": "8.0.0",

diff --git a/packages/nextjs-plugin/src/index.ts b/packages/nextjs-plugin/src/index.ts
@@ -3,7 +3,7 @@ import withBundleAnalyzer from '@next/bundle-analyzer'
 import withOptimizedImages from '@hashicorp/next-optimized-images'
 import withTMBase from 'next-transpile-modules'
 import { NextConfig } from 'next'
-import withGraphqlBasic from './plugins/with-graphql-basic'
+import withGraphql from './plugins/with-graphql'
 import withFramerMotionEsmodulesDisabled from './plugins/with-framer-motion-esmodules-disabled'
 import { getHashicorpPackages } from './get-hashicorp-packages'
 
@@ -33,7 +33,7 @@ function withHashicorp({
   return function withHashicorpInternal(nextConfig: Partial<NextConfig> = {}) {
     const chain = [
       withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true' }),
-      withGraphqlBasic(),
+      withGraphql(),
       withFramerMotionEsmodulesDisabled(),
     ]
 

diff --git a/...-plugin/src/plugins/with-graphql-basic.js → ...nextjs-plugin/src/plugins/with-graphql.js b/...-plugin/src/plugins/with-graphql-basic.js → ...nextjs-plugin/src/plugins/with-graphql.js
@@ -1,13 +1,10 @@
-// Very simple plugin that loads external graphql files as strings.
-// We use this in concert with the rivet data loading system.
-
-module.exports = function withGraphQlBasic() {
-  return function withGraphQlBasicInternal(nextConfig = {}) {
+module.exports = function withGraphQl() {
+  return function withGraphQlInternal(nextConfig = {}) {
     return Object.assign({}, nextConfig, {
       webpack(config, options) {
         config.module.rules.push({
           test: /\.(graphql|gql)$/,
-          use: [{ loader: 'raw-loader' }],
+          loader: 'graphql-tag/loader',
         })
 
         if (typeof nextConfig.webpack === 'function') {