graphql-tools

graphql-tools copied to clipboard

Issue workflow progress

Progress of the issue based on the Contributor Workflow

• [ ] 1. The issue provides a reproduction available on Github, Stackblitz or CodeSandbox

  Make sure to fork this template and run yarn generate in the terminal.

  Please make sure the GraphQL Tools package versions under package.json matches yours.

• [ ] 2. A failing test has been provided
• [ ] 3. A local solution has been provided
• [ ] 4. A pull request is pending review

---

Describe the bug

I'm using graphql-codegen to generate types for GraphQL queries in my Vue SFCs. As soon as there is a defineProps<ImportedType>() in a file, graphql-codegen does not generate types for the queries in this file anymore. When I remove the imported type, the types are generated again.

To Reproduce Steps to reproduce the behavior:

Setup graphql-codegen in your Vue project. Setup a new component which contains

• GraphQL operations
• a Vue compiler macro (defineProps) with an imported type Example:

<template>
  <p v-bind="props">Hello Bug</p>
</template>

<script setup lang="ts">
import { graphql } from 'src/gql';
import { useQuery } from '@vue/apollo-composable';
import type { QSelectProps } from 'quasar';

const props = defineProps<QSelectProps>();

const { result } = useQuery(
  graphql(`
    query Test {
      helloWorld {
        id
        name
      }
    }
  `),
);
</script>

Expected behavior

graphql-codegen should generate types for queries in SFCs, regardless of imported types in compiler macros.

Environment:

• OS: Windows 11
• @graphql-tools/graphql-tag-pluck: 8.3.0
• NodeJS: 22 LTS

Additional context

In the parseWithVue function, an error is thrown: [@vue/compiler-sfc] No fs option provided to 'compileScript' in non-Node environment. File system access is required for resolving imported types. The parseWithVue function calls Vue SFC's compileScript function without the fs option. The SFCScriptCompileOptions type in @vue/compiler-sfc includes this information:

   /**
   * File system access methods to be used when resolving types
   * imported in SFC macros. Defaults to ts.sys in Node.js, can be overwritten
   * to use a virtual file system for use in browsers (e.g. in REPLs)
   */
  fs?: {
    fileExists(file: string): boolean
    readFile(file: string): string | undefined
    realpath?(file: string): string
  }

So in order to fix this bug, compileScript needs to be called with the fs option described above, or TypeScript must be added as a direct dependency and be made available to the Vue SFC compiler with registerTS.