Importing .graphql files

[avatsaev]

Description

How can I important .graphql files in typescript in a nx monorepo

Motivation

Our NX backend is running on PrismaJS and we are currently migrating it to NX workspace, we work with a lot of graqhql files and can't import then in an NX workspace without the graphql webpack loader? Is there any workaround to import grahql files in typescript files?

Couldn't find anything about it on the internet or the docs

[klemenoslaj]

If you're only interested in the applications you should be able to provide custom webpack configuration - or rather extension of existing - using something like @angular-builders/custom-webpack and graphql-tag loader.

In case you want to put publishable libraries in the mix, this is pretty much not done yet by anyone. You could probably get to compile gql tags in .ts files using custom TS transformer, but it's a long shot too since you'd need to rely on unsupported APIs.

I opened feature request for this but was closed super fast. There is as well directly related request in ng-packagr too.

[avatsaev]

I've tried @angular-builders/custom-webpack doesn't work for express apps, so I just refactored the all gql files to .ts with default exports of with graphql syntax precompilation, it was annoying because there was a lot files, but it works

[Javadebi]

I've tried @angular-builders/custom-webpack doesn't work for express apps, so I just refactored the all gql files to .ts with default exports of with graphql syntax precompilation, it was annoying because there was a lot files, but it works

I know its too late but you can add custom webpack to use .graphql code.
Simply add a file called custom-graphql-webpack.config.js in your root like this:

const { merge } = require('webpack-merge');

module.exports = (config) => {
  return merge(config, {
    module: {
      rules: [
        {
          test: /\.(graphql|gql)$/,
          exclude: /node_modules/,
          loader: 'graphql-tag/loader',
        },
      ],
    },
  });
};

and use it in your project.json as a webpack config in options:

"build": {
      "executor": "@nrwl/node:webpack",
      "outputs": [
        "{options.outputPath}"
      ],
      "options": {
        "outputPath": "dist/apps/server/authentication/src",
        "main": "apps/server/authentication/src/index.ts",
        "tsConfig": "apps/server/authentication/tsconfig.app.json",
        "webpackConfig": "custom-graphql-webpack.config.js" //add this
      },
      "configurations": {
        "production": {
          "optimization": true,
          "extractLicenses": true,
          "inspect": false,
          "fileReplacements": [
            {
              "replace": "apps/server/authentication/src/environments/environment.ts",
              "with": "apps/server/authentication/src/environments/environment.prod.ts"
            }
          ]
        }
      }
    },

[mbrimmer83]

graphql-tag

This worked for me but for some reason, it doesn't work with import syntax. I am forced to use require in node to get the typeDefs to not be undefined.

// works 
const healthDef = require('./types/health.graphql')

// fails
`import def from './types/health.graphql'`

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.