vercel / vercel/ncc

Importing/loading .graphql files in Typescript project

Open
#498 2 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
9.8k
Forks
326
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the failure with ncc build api/index.ts -o dist and the .graphql SDL example described in the issue. Read how ncc handles loaders and the referenced graphql-tag approach; done means a TypeScript project can import .graphql files successfully during ncc compilation.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, typescript
Domain
build-system, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.