Nextjs-Graphql webpack loader：如何将 Nextjs 与 Graphql loader 集成答案

【问题标题】：Nextjs-Graphql webpack loader: How to integrate Nextjs with Graphql loaderNextjs-Graphql webpack loader：如何将 Nextjs 与 Graphql loader 集成
【发布时间】：2019-02-21 15:26:36
【问题描述】：

我正在尝试将 Nextjs 与 graphql-tag/loader 集成，这是我的 next.config.js 文件：

const withSass = require('@zeit/next-sass')
const graphqlLoader = require('graphql-tag/loader')

module.exports = withSass({
  webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      loader: graphqlLoader,
      exclude: /node_modules/
    })

    return config
  }
})

我无法构建，我收到以下错误：

/HOME/node_modules/graphql-tag/loader.js:43
  this.cacheable();
       ^
TypeError: Cannot read property 'cacheable' of undefined

请帮忙。

【问题讨论】：

我尝试在isServer === true时添加规则，在isServer === false时仍然无法构建，同样的错误。

标签： javascript webpack graphql next.js graphql-tag

【解决方案1】：

我让它在我的设置中工作如下。不确定您的代码有什么问题，但是您可以尝试一下，看看它是否正常工作:) 您可以使用下一个 js 插件。也许插件的顺序很重要。这是我的配置。还有一些额外的代码，但我敢肯定，你会从中得到你需要的东西。至于库版本“next”：“6.1.1”，“next-optimized-images”：“1.4.1”，“next-plugin-graphql”：“^0.0.1”，

const withSass = require("@zeit/next-sass");
const webpack = require("webpack");
const withGraphQL = require("next-plugin-graphql");
const withOptimizedImages = require("next-optimized-images");

module.exports = withOptimizedImages(
  withGraphQL(
    withSass({
      cssModules: true,
      cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]"
      },
      webpack: config => {

        config.plugins.push(
          new webpack.ContextReplacementPlugin(
            /graphql-language-service-interface[\\/]dist$/,
            new RegExp(`^\\./.*\\.js$`)
          )
        );

        return config;
      }
    })
  )
);

如果您只想修改代码而不安装插件，您可以从next-graphql-plugin 中获得启发。该插件对我有用，与您的设置不同的是它们的规则配置如下

  config.module.rules.push({
       test: /\.(graphql|gql)$/,
       include: [dir],
       exclude: /node_modules/,
       use: [
           {
             loader: 'graphql-tag/loader'
           }
       ]
    })

【讨论】：

谢谢，我会更详细地查看插件 next-graphql-plugin。