don't work in dev mode

[clever-vpn]

Hi, I got error when I run pnpm dev. the error is : 9:38:51 PM [vite] Pre-transform error: Failed to resolve import "schema.graphql" from "src/graphql/query/isloggedin.gql". Does the file exist? 9:38:51 PM [vite] Internal server error: Failed to resolve import "schema.graphql" from "src/graphql/query/isloggedin.gql". Does the file exist? Plugin: vite:import-analysis File: /Users/bolinwu/CleverProject/front/boss/src/graphql/query/isloggedin.gql:1:1

[DerZade]

Did you create a schema.graphql and if so, where is it located?

[DerZade]

Okay nvm, I am able to reproduce this.

I'll try to fix it in the next couple of days, until then you can use the following woraound. Just add this to your vite config (please configure the correct path):

export default defineConfig({
    // [...]
    resolve: {
        // [...]
        alias: {
            // [...]
+           'schema.graphql': fileURLToPath(new URL('./schema.graphql.d.ts', import.meta.url))
        }
    }
});

(I have this set up for all my projects, therefore I didn't notice it broke at some point)

[clever-vpn]

thank you very much. by the way, if there is support for #import syntax (formerly known as graphql-import), that would be even better.

[clever-vpn]

by the way, package @graphql-tools/graphql-file-loader supports #import syntax.

[DerZade]

by the way, package @graphql-tools/graphql-file-loader supports #import syntax.

First of all, to make this clear: You don't need to import the schema manually. The plugin automatically takes care of that. Still, it would be quite handy for sharing fragments between multiple files. This is why I already tried to get this running (very briefly) at some point, but didn't succeed :P

[DerZade]

Seems like the issues stems from here:

https://github.com/arma-events/vite-plugin-typed-graphql/blob/27c499fb5df500d9ee8bfe68a8ebece5e8dd5c10/src/index.ts#L82

The weird thing is, that it seems to work if I use an relative path (from the transformed module) to the schema, although the docs state the following, which doesn't match this behaviour:

id can be an absolute path to a file or directory or a path relative to the current working directory.

[clever-vpn]

thank you very much. i patched it before, and it worked fine. the patch is:

diff --git a/dist/index.mjs b/dist/index.mjs
index 9e36697d3eaec7484d595d3315df004f00b7ea1c..afa6994292be1e5cd444944cdb5400d71fabb1d8 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -1,5 +1,6 @@
 import { createFilter, normalizePath } from 'vite';
 import { loadDocuments } from '@graphql-tools/load';
+import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
 import { disableFragmentWarnings, resetCaches } from 'graphql-tag';
 import { D as DeclarationWriter, c as codegenTypedDocumentNode, t as typescriptToJavascript, l as loadSchemaDocument } from './shared/vite-plugin-typed-graphql.15184996.mjs';
 import 'fs/promises';
@@ -52,10 +53,11 @@ ${err}
         return null;
       if (!filter(id))
         return null;
-      this.addWatchFile(SCHEMA_PATH);
+      // this.addWatchFile(SCHEMA_PATH);
       TRANSFORMED_GRAPHQL_FILES.add(id);
       resetCaches();
-      const [doc] = await loadDocuments(src, { loaders: [] });
+      // const [doc] = await loadDocuments(src, { loaders: [] });
+      const [doc] = await loadDocuments(id, { loaders: [new GraphQLFileLoader()] });
       return {
         code: await codegenTypedDocumentNode(SCHEMA, doc, {
           typedDocNode: true
diff --git a/dist/shared/vite-plugin-typed-graphql.15184996.mjs b/dist/shared/vite-plugin-typed-graphql.15184996.mjs
index 37d9bb842e21b293881ce02215d45530b105250e..01d2d7df9faf2a760d1c48d73d06fcbade99c9b0 100644
--- a/dist/shared/vite-plugin-typed-graphql.15184996.mjs
+++ b/dist/shared/vite-plugin-typed-graphql.15184996.mjs
@@ -1,4 +1,5 @@
 import { loadDocuments } from '@graphql-tools/load';
+import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
 import { readFile, writeFile } from 'fs/promises';
 import * as typescriptPlugin from '@graphql-codegen/typescript';
 import * as typescriptOperationPlugin from '@graphql-codegen/typescript-operations';
@@ -54,8 +55,9 @@ async function typescriptToJavascript(ts) {
 }

 async function writeOperationDeclarations(path, schema, schemaImports = "") {
-  const operationSrc = await readFile(path, "utf-8");
-  const [doc] = await loadDocuments(operationSrc, { loaders: [] });
+  // const operationSrc = await readFile(path, "utf-8");
+  // const [doc] = await loadDocuments(operationSrc, { loaders: [] });
+  const [doc] = await loadDocuments(path, { loaders: [new GraphQLFileLoader()] });
   const typeScript = await codegenTypedDocumentNode(schema, doc, {
     operation: true,
     schema: schemaImports === "",

[DerZade]

I'll investigate a bit more regarding the addWatchFile. I don't want to remove entirely 🤔

Does the setup with GraphQLFileLoader work for you to enable the GQL Import syntax? If so, would you mind opening a PR with those changes?