1

When creating a simple TypeScript project to make a GraphQL server, I want to import *.graphql files directly into my code, such as schema.graphql. I have followed all the indications about module declaration such that I can do such imports.

VS Code does not show any error, however TSC does not resolve:

$ yarn tsc && node dist/index.js
yarn run v1.22.4
$ /home/arsleust/seedbox/back/node_modules/.bin/tsc
Done in 2.15s.
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module './graphql/schema.graphql'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/arsleust/seedbox/back/dist/index.js:7:42)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

My project:

  • ./package.json
{
    "name": "app",
    "version": "1.0.0",
    "dependencies": {
        "apollo-server": "2.14.1",
        "graphql": "15.0.0",
        "graphql-tools": "6.0.5",
        "nodemon": "2.0.4",
        "ts-node": "8.10.2",
        "typescript": "3.9.3"
    }
}
  • ./tsconfig.json
{
    "compilerOptions": {
        "target": "esnext",
        "module": "commonjs",
        "esModuleInterop": true,
        "typeRoots": ["./node_modules/@types", "./@types"],
        "outDir": "dist",
        "sourceMap": true
    },
    "include": ["src", "./@types"],
    "exclude": ["node_modules", "dist"]
}
  • ./@types/index.d.ts
declare module '*.graphql' {
    import { DocumentNode } from 'graphql';
    const Schema: DocumentNode;

    export = Schema;
}
  • ./src/index.ts
import { ApolloServer } from 'apollo-server';
import typeDefs from './graphql/schema.graphql';

// Provide resolver functions for your schema fields
const resolvers = {
    Query: {
        hello: () => `Say hello to the new Apollo Server!`,
    },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
    console.log(`Server ready at ${url}`);
});
  • ./src/graphql/schema.graphql
type Query {
    hello: String!
}

When I look at tsc --traceResolution I get:

======== Resolving module './graphql/schema.graphql' from '/home/arsleust/seedbox/back/src/index.ts'. ========
Explicitly specified module resolution kind: 'NodeJs'.
Loading module as file / folder, candidate module location '/home/arsleust/seedbox/back/src/graphql/schema.graphql', target file type 'TypeScript'.
File '/home/arsleust/seedbox/back/src/graphql/schema.graphql.ts' does not exist.
File '/home/arsleust/seedbox/back/src/graphql/schema.graphql.tsx' does not exist.
File '/home/arsleust/seedbox/back/src/graphql/schema.graphql.d.ts' does not exist.
Directory '/home/arsleust/seedbox/back/src/graphql/schema.graphql' does not exist, skipping all lookups in it.
Loading module as file / folder, candidate module location '/home/arsleust/seedbox/back/src/graphql/schema.graphql', target file type 'JavaScript'.
File '/home/arsleust/seedbox/back/src/graphql/schema.graphql.js' does not exist.
File '/home/arsleust/seedbox/back/src/graphql/schema.graphql.jsx' does not exist.
Directory '/home/arsleust/seedbox/back/src/graphql/schema.graphql' does not exist, skipping all lookups in it.
======== Module name './graphql/schema.graphql' was not resolved. ========
gdforj
  • 153
  • 2
  • 10
  • 1
    TypeScript doesn't support importing GraphQL files. You would need to utilize WebPack or Babel to handle those imports. You can also read them directly from the file using `fs.readFile`, or use a library like `graphql-tools` to do it for you. – Daniel Rearden May 31 '20 at 21:15
  • That's the answer, thanks – gdforj Jun 01 '20 at 23:14

0 Answers0