代码之家  ›  专栏  ›  技术社区  ›  acmoune

Nextjs Graphql webpack loader:如何将Nextjs与Graphql loader集成

  •  2
  • acmoune  · 技术社区  · 7 年前

    我正在尝试将Nextjs与graphql标记/加载器集成,这是我的 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
    

    1 回复  |  直到 7 年前
        1
  •  4
  •   David Mraz    7 年前

    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'
               }
           ]
        })