Processing .graphql extension in the Typescript compilation process.

I am working on a feature where I need to query a remote graphql api. Graphql-let generates the necessary typings based on the remote graphql schema.

However, when I start my application (nextjs with a custom express server written in ts) the compilation process blows up when it comes across the .graphl extension.

A beer is ready to be claimed by a champion who can resolve the riddle below...

> graphql-let

[ graphql-let ] Done nothing, caches are fresh.
[nodemon] 2.0.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): server/**/*
[nodemon] watching extensions: ts,js,graphql
[nodemon] starting `ts-node --project tsconfig.server.json server/index.ts`

/.../node_modules/typescript/lib/typescript.js:139148
                var error = new Error(`Could not find source file: '${fileName}'.`);
                            ^
Error: Could not find source file: '/.../lib/reviews/queries/getReviews.graphql'.
    at getValidSourceFile (/.../node_modules/typescript/lib/typescript.js:139148:29)
    at Object.getEmitOutput (/.../node_modules/typescript/lib/typescript.js:139533:30)
    at getOutput (/.../node_modules/ts-node/src/index.ts:562:32)
    at Object.compile (/.../node_modules/ts-node/src/index.ts:775:32)
    at Module.m._compile (/.../node_modules/ts-node/src/index.ts:858:43)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.require.extensions.(anonymous function) [as .js] (/.../node_modules/ts-node/src/index.ts:861:12)
    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)
[nodemon] app crashed - waiting for file changes before starting...

The offending piece of code is like so:

import {
    GetReviewsDocument,
    useGetReviewsQuery,
} from "../reviews/queries/getReviews.graphql";

const reviews = () => {
    try {
        const { data, error } = await useGetReviewsQuery({
            query: GetReviewsDocument
        });

        if (error) {
            console.log(`An error occurred while trying to fetch reviews. ${error.message}`);
        }

        console.log(`Success: ${JSON.stringify(data)}`);

    } catch (e) {
                    console.log(`An error occurred while trying to fetch reviews. ${e}`);
    }
});

export default reviews;

Comments

[Dotan Simha]

I think maybe @piglovesyou may be able to help with that, since it looks like an issue with the Webpack loader.
Maybe you can share a reproduction of the issue? It's really difficult to understand the cause for that from a log. Thanks!

[Soichi Takamura]

Hi, I caught up finally. Not sure but is seems you're running it with ts-node so that's why? You need webpack with graphql-let/loader properly cofigured.

[UncleZeze 🇿🇦]

Hi, the application is a nextjs web app with Typescript. This is the webpack config section in the next.config.js:

webpack: (config, options) => {

            config.resolve.alias["components"] = path.join(__dirname, "components");
            config.resolve.alias["lib"] = path.join(__dirname, "lib");
            config.resolve.alias["public"] = path.join(__dirname, "public");
            config.resolve.alias["server"] = path.join(__dirname, "server");
            config.module.rules.push({
                test: /\.graphql$/,
                exclude: /node_modules/,
                use: [options.defaultLoaders.babel, { loader: "graphql-let/loader" }],
            });
            config.module.rules.push({
                test: /\.graphqls$/,
                exclude: /node_modules/,
                use: ["graphql-tag/loader", "graphql-let/schema/loader"],
            });
            return config;
        }

[UncleZeze 🇿🇦]

@piglovesyou Care to comment on this?