How can I load a configuration from .graphqlrc.ts file and get autocomplete?

[onx2]

I'm working in a bare bones Vite / React / Typescript project and would like to configuration GraphQL autocomplete inside of .graphql files. I am able to get it working perfectly using a .graphqlrc.yml file but when I use .ts extension the autocomplete breaks and I'm at a loss as to why that would be.

Here is the .graphqlrc.ts file config:

/// <reference types="vite/client" />
import type { IGraphQLConfig } from 'graphql-config'
import "dotenv/config"

const config: IGraphQLConfig = {
  schema: `${import.meta.env['VITE_API_URL']}/graphql`, // http://localhost:3000/graphql -- this works perfectly when manually placed in the .yml version of this file.
  documents: "src/**/*.graphql"
}
export default config

[onx2]

😅 I think this may have been because I was using the vite specific import style for the environment variables. Using process.env is working as expected.

/// <reference types="vite/client" />
import type { IGraphQLConfig } from 'graphql-config'
import "dotenv/config"

const config: IGraphQLConfig = {
  schema: `${process.env["VITE_API_URL"]}/graphql`,
  documents: "src/**/*.graphql"
}
export default config

[onx2]

Actually I'm going to reopen this because I'm still having an issue getting autocomplete in this exact same setup but co-located with other directories.

In a standalone git project web-app it works as I mentioned above, but when I use a git project that holds multiple top-level folders it doesn't.

# WORKS
- web-app

# BROKEN
- some-project
  - web-app
  - api

[onx2]

I think this may be a VSCode issue? I open just the web folder using code . so it is the top level folder in the vs code project and it seems to work. However, if I open the parent folder then try it is broken.

Is there perhaps a VSCode setting that I need to configure?

I thought this might do the trick but unfortunately it doesn't.

"graphql-config.load.filePath": "./web/.graphqlrc.ts"