typing issues with index.ts

[hyusetiawan]

running the command as suggested by the document, generated the following index.ts

/**
 * GQty: You can safely modify this file based on your needs.
 */

import { createReactClient } from '@gqty/react'
import { createClient as createSubscriptionsClient } from 'graphql-sse'
import { Cache, GQtyError, createClient, type QueryFetcher } from 'gqty'
import { generatedSchema, scalarsEnumsHash, type GeneratedSchema } from './schema.generated'

const queryFetcher: QueryFetcher = async function ({ query, variables, operationName }, fetchOptions) {
  // Modify "/api/graphql" if needed
  const response = await fetch('http://127.0.0.1:8000/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query,
      variables,
      operationName,
    }),
    mode: 'cors',
    ...fetchOptions,
  })

  if (response.status >= 400) {
    throw new GQtyError(`GraphQL endpoint responded with HTTP status ${response.status}.`)
  }

  const text = await response.text()

  try {
    return JSON.parse(text)
  } catch {
    throw new GQtyError(`Malformed JSON response: ${text.length > 50 ? text.slice(0, 50) + '...' : text}`)
  }
}

const subscriptionsClient =
  typeof window !== 'undefined'
    ? createSubscriptionsClient({
        lazy: true,
        url: () => {
          // Modify if needed
          const url = new URL('/api/graphql', window.location.href)
          url.protocol = url.protocol.replace('http', 'ws')
          return url.href
        },
      })
    : undefined

const cache = new Cache(
  undefined,
  /**
   * Default option is immediate cache expiry but keep it for 5 minutes,
   * allowing soft refetches in background.
   */
  {
    maxAge: 0,
    staleWhileRevalidate: 5 * 60 * 1000,
    normalization: true,
  },
)

export const client = createClient<GeneratedSchema>({
  schema: generatedSchema,
  scalars: scalarsEnumsHash,
  cache,
  fetchOptions: {
    fetcher: queryFetcher,
    subscriber: subscriptionsClient,
  },
})

// Core functions
export const { resolve, subscribe, schema } = client

// Legacy functions
export const { query, mutation, mutate, subscription, resolved, refetch, track } = client

export const {
  graphql,
  useQuery,
  usePaginatedQuery,
  useTransactionQuery,
  useLazyQuery,
  useRefetch,
  useMutation,
  useMetaState,
  prepareReactRender,
  useHydrateCache,
  prepareQuery,
  useSubscription,
} = createReactClient<GeneratedSchema>(client, {
  defaults: {
    // Enable Suspense, you can override this option for each hook.
    suspense: true,
  },
})

export * from './schema.generated'

However, I am seeing the following typing error that may be preventing the result of useQuery to be typed:

Could not find a declaration file for module '@gqty/react'.
Circular definition of import alias 'GQtyError'.ts
here is a screenshot of how it looks like

this is a command that I use to generate:
npx @gqty/cli --target=src/gqty/index.ts http://127.0.0.1:8000/graphql
I see in dev dependencies that I have:
"@gqty/react": "^3.0.0-alpha-7b21563c.0",
Note, if I console.log one of the queries, it does show as Proxy object with the properties, but the typing does not show

Please advise

[vicary]

Hi @hyusetiawan!

With the caret selector ^3.0.0-alpha-7b21563c.0, depending on your package manager, different alpha versions may be installed.

Would you please share your installed version of @gqty/react and gqty?

[hyusetiawan]

Here's what I got from npm list

├── @gqty/react@3.0.0-alpha-7b21563c.0
├── gqty@3.0.0-alpha-7b21563c.0

[vicary]

Are you using next 13? In their generated tsconfig.json, they use "moduleResolution": "bundler" for some reason, that breaks our type definitions.

[hyusetiawan]

@vicary yes, that is our module resolution, we are using vite as our dev app server, here's our full tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  },

  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

[vicary]

The bundler option requires dependent packages to host a different set of type definition files. i.e. It was .d.ts for both .js and .mjs, we now need a new set of .d.mts and a modified package.json for that to work.

It is within my plans, but it may not happen immediately. You may fallback to "moduleResolution": "node" for the moment, and use a separate tsconfig via extend directive for builds.

[hyusetiawan]

But If i change to node, it would break my frontend ui application import no?

…

On Fri, Aug 25, 2023 at 6:26 PM Vicary A. ***@***.***> wrote: The bundler option requires dependent packages to host a different set of type definition files. i.e. It was .d.ts for both .js and .mjs, we now need a new set of .d.mts and a modified package.json for that to work. It is within my plans, but it may not happen immediately. You may fallback to "moduleResolution": "node" for the moment, and use a separate tsconfig via extend directive for builds. — Reply to this email directly, view it on GitHub <#1598 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIDQCHWYQKURBILI6WBKRTXXFGE3ANCNFSM6AAAAAA37FPWKU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[vicary]

Using "moduleResolution": "node" works in our Next 13 and Vite examples. If you do see it breaking, please share more info about your particular setup.

[hyusetiawan]

@vicary using moduleResolution node does make the auto complete work, but for some reason the index.ts is still showing errors, anything else we can do?

[vicary]

Most likely it's the actual version in your node_modules not being the one we expected.

We had type issues where yarn tends to select older alphas with the latest tag, but this doesn't look like one of them.

Let's go with this checklist:

1. Check the dependent version range in package.json
2. Check the actual installed version in package-lock.json
3. Check the version in node_modules/gqty/package.json

If all of the above looks correct, I may need to look at the actual contents resolved in your IDE. Try CMD + click on the from 'gqty', see where it brings you, then we'll take a look at the file contents.

[hyusetiawan]

@vicary I figured out the issue, so if the index.ts is generated at the same directory level as package.json it seems to work but when I move it to src/ folder the typing issues start to show up.

I wonder if it's because my baseUrl: is set to src/

[vicary]

Setting baseUrl without paths makes it impossible to choose between node_modules/gqty or src/gqty.

1. You may rename the src/gqty to something else, e.g. src/graphql.
2. You may add "paths": { "~/*": ["src/*"] } so you can write it like this import ... from "~/gqty";, you'll need to update all existing imports with this method.

[Blankeos]

To anyone else still having problems with this. I have a fix.

In my case, I mostly used the default values when running the CLI.

Problem

The problem was I was generating the files on the default directory on the CLI: gqty/index.ts and results into this:

Error Message: Circular Definition of import alias 'Cache'.
Module '"gqty"' declares 'Cache' locally, but it is not exported.

Cause

I can't believe I didn't catch it right away but it was caused by "gqty

// gqty/index.ts

// this is confused between 'node_modules/gqty' and 'gqty/index.ts' ⬇️ 
import { Cache, GQtyError, createClient, type QueryFetcher } from 'gqty'; 

Solution

Just change the generated client location when running the CLI:

? Where is your GraphQL endpoint or schema files? schema.graphql
✔ Schema introspection completed.
? Are you using React with GQty? Yes
? Do you need a subscription client? (Enter "-" to skip) -
? Do you want a TypeScript client over vanilla.js? Yes
? Where should the client be generated? src/gqty/index.ts (This is what fixed it for me)
✔ Code generation completed.
? Do you want us to run "pnpm add" for you? (Y/n) Y

Additionally

For ease of use it depends on you if you want to do this too, but it helps so you can access the client easily.

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"], // you can import with: `from '@/gqty'`
      "~gqty": ["./src/gqty/index.ts"] // you can import with: `from '~gqty'
    }
}