Importing/loading .graphql files in Typescript project

[TAnas0]

Hey,

I am trying to build a GraphQL API built with Typescript using ncc and having issues importing some .graphql files that contain my SDL.

To my understanding, I should provide a loader for this type of files, probably graphql-tag. I managed to get this to work on Webpack before, and was wondering how I can define a loader for ncc.

For further context, I am experimenting with Zeit trying to deploy a GraphQL API in Now v2. That may not be possible, but I am also interested in making ncc work with .graphql files

Output of ncc build api/index.ts -o dist:

ncc: Version 0.20.5
ncc: Compiling file index.js
ncc: Using typescript@3.7.4 (local user-provided)
Error: Module parse failed: Unexpected token (1:5)
File was processed with these loaders:
 * ../../../.nvm/versions/node/v12.6.0/lib/node_modules/@zeit/ncc/dist/ncc/loaders/shebang-loader.js
You may need an additional loader to handle the result of these loaders.
> type User {
|   username: String
|   posts: [Post]!
Module parse failed: Unexpected token (1:5)
File was processed with these loaders:
 * ../../../.nvm/versions/node/v12.6.0/lib/node_modules/@zeit/ncc/dist/ncc/loaders/shebang-loader.js
You may need an additional loader to handle the result of these loaders.
> type Post {
|   id: ID!
|   title: String!
    at evalmachine.<anonymous>:1:1501918
    at eval (eval at create (evalmachine.<anonymous>:1:273391), <anonymous>:13:1)
    at processTicksAndRejections (internal/process/task_queues.js:85:5)

Example of a .graphql file:

type Post {
  id: ID!
  title: String!
}

type Query {
  getAllPosts: [Post],
}

I've been lurking in Zeit's Spectrum channel asking for recomendations, and apparently this is feasible, I am probably just missing something obvious.

[bombillazo]

Does this mean ncc does not recognize graphql files? We're having some trouble with our build and assumed ncc could load graphql files until I saw this issue.

[glensc]

As much I hate "me too" issues, here's my code having the same problem. It's using graphql-import-node module and graphql.print to serialize to string.

// src/CommentApi/Queries/index.ts
import "graphql-import-node";
import { print } from "graphql"
import getArticleStatsDocument from "./getArticleStats.graphql";

export const getArticleStats: string = (() => {
  return print(getArticleStatsDocument);
})();

had similar error with jest, but that was fixed with jest config adding a transformer:

// jest.config.ts
+  transform: {
+    "^.+\\.graphql$": "graphql-import-node/jest"
+  },

$ npx @vercel/ncc build bin/console.ts -o bin --v8-cache --target es2020

``` npx: installed 1 in 1.651s ncc: Version 0.33.1 ncc: Compiling file index.js into CJS ncc: Using typescript@4.4.4 (local user-provided) Error: Module parse failed: Unexpected token (1:16) File was processed with these loaders: * ../../../../.npm/_npx/71604/lib/node_modules/@vercel/ncc/dist/ncc/loaders/shebang-loader.js You may need an additional loader to handle the result of these loaders. > query($startTime: Date!, $endTime: Date!, $articleId: [Int!]) { | data: getArticleStats(input: { | from: $startTime, Module parse failed: Unexpected token (1:6) File was processed with these loaders: * ../../../../.npm/_npx/71604/lib/node_modules/@vercel/ncc/dist/ncc/loaders/shebang-loader.js You may need an additional loader to handle the result of these loaders. > query findMostReadArticles($limit: Int, $hours: Int) { | data: getArticles( | input: { pager: { limit: $limit, orderBy: "views", orderDirection: DESC } } Module parse failed: Unexpected token (1:9) File was processed with these loaders: * ../../../../.npm/_npx/71604/lib/node_modules/@vercel/ncc/dist/ncc/loaders/shebang-loader.js You may need an additional loader to handle the result of these loaders. > mutation recordArticleStatistics($input: [ArticleStatisticsInput!]!) { | data: recordArticleStatistics( | input: $input at /Users/glen/.npm/_npx/71604/lib/node_modules/@vercel/ncc/dist/ncc/index.js.cache.js:37:1896993 at /Users/glen/.npm/_npx/71604/lib/node_modules/@vercel/ncc/dist/ncc/index.js.cache.js:37:353322 at _done (eval at create (/Users/glen/.npm/_npx/71604/lib/node_modules/@vercel/ncc/dist/ncc/index.js.cache.js:20:117937), :9:1) at eval (eval at create (/Users/glen/.npm/_npx/71604/lib/node_modules/@vercel/ncc/dist/ncc/index.js.cache.js:20:117937), :34:22) ```