GraphQL parameters and response is not typed?

[some-user123]

I'd followed the Quick start and used the SpaceX launches query used as an example.

1. Install nuxt-graphql-client (using pnpm)
2. Add it to modules and set Graphql host in nuxt.config.ts
3. Add starlink.gql:

query launches($limit: Int = 5) {
  launches(limit: $limit) {
    id
    launch_year
    mission_name
  }
}

4. Run pnpm dev
5. Use it in SFC:

const { data } = await useAsyncGql({
  operation: 'launches',
  variables: { limit: 10 },
})

I stumbled upon two things:

• I get a hint in VSCode that the (only available) operation is launches. ✔ But I don't get any hint, which parameters would be available. Even passing limit = 'foo' does not raise a type error. Are parameters not typed❓
• data is of type Ref<any>. I would have expected something more elaborated based on the GraphQL definition. Is my expectation wrong or am I doing something wrong❓

[Diizzayy]

But I don't get any hint, which parameters would be available

@some-user123 Certainly leads me to believe that the issue here is your IDE. I suggest ensuring that you have the Volar extension installed and configured correctly.

Even passing limit = 'foo' does not raise a type error

This would only raise an error if typescript.strict is set to true.

data is of type Ref. I would have expected something more elaborated based on the GraphQL definition.

It should all in fact be typed properly.

[some-user123]

That's great to hear. Then it is the solution I'm looking for. I just need to get it running... Thanks!

[Diizzayy]

@some-user123 Feel free to reach out to me on discord (Diizzayy#1964) if you need any additional help

[some-user123]

Got it working, thanks :-)

I like the module, but I'm missing two features:

• I don't get any support (hints etc.) when writing the GraphQL query.
• Other solutions (like https://github.com/babyfish-ct/graphql-ts-client) only run the generate step once and then dynamically type your query result. That's super nice.

Are there any plans to add that to nuxt-graphql-client or ideas how to achieve that with nuxt-graphql-client?

[Nicolas-Nmedia]

Hey guys ! Just ran into the same problem in VS Code where, sadly, I'm not getting any type hints when using gql functions, even though I have Volar installed.

Got it working, thanks :-)

May I inquire how you managed to do so ? Did you configure volar any special way ?

Thanks for your help and a big thank you for this module !

[cdwmhcc]

@Diizzayy webstorm doesn't have any type hints.