Closed DarkLite1 closed 3 years ago
I'm not 100% sure as I haven't been using this in a while, but unfortunately because of how useResult
was defined, you will have to specify the generic when you call it, not cast the result.
const { result, loading } = useAllAccountsQuery()
const allAccounts = useResult<ReturnType>(result)
Thank you for the help. I tried your suggestion but it's stil underlined in red. I tried the following which all failed:
const { result, loading } = useAllAccountsQuery()
const allAccounts = useResult<ReturnType>(result)
const { result, loading } = useAllAccountsQuery()
const allAccounts = useResult<AllAccountsQuery>(result)
Does it work if you use useQuery directly? It could be something with the generator.
For this template:
<div v-for="account in result.accounts" :key="account.accountIdentifier">
{{ account.name }}
{{ account.accountIdentifier }}
</div>
Thie works fine:
const { result, loading, error } = useQuery<AllAccountsQuery>(gql`
query allAccounts {
accounts {
accountIdentifier
name
}
}
)
And I finally found it, this works too (without useResult
):
const { result, loading, error } = useAllAccountsQuery()
// or
const { result: allAccounts, loading, error } = useAllAccountsQuery()
That makes me a bit confused on the function of useResult
as it is not needed in this case.
According to the docs on useResult
it allows you to pick a property like so:
const { result, loading, error } = useAllAccountsQuery()
const allAccounts = useResult(result, null, data => data.accounts)
<div v-for="account in allAccounts" :key="account.accountIdentifier">
{{ account.name }}
</div>
This does not break the code but removes the type and removes intellisense:
useResult
is for when you have a complex query and need to reactively transform the value. Sometimes queries don't match their top level result (like enum introspection). Unfortunately, vue-apollo v4 was written with TypeScript as an afterthought using a lot of any
, the API wasn't particularly clean especially for a rewrite, and useResult
in particular is complex feature-wise and was hard to type when I redid the types.
I'm not sure if the method you're using would support reactive updates when the graphql variables change, but I'd be really interested in knowing if you find out.
IIRC you have to always specify the types for useResult
, because it has multiple incompatible behaviors, like automatically picking the first result if it's the only result.
It does seem to get the type correct in the <script>
section:
Also when hovering allAccounts
:
But still.... the account
variable is any in that case. I don't understand why it isn't seen by Vue on iterating the allAccounts
object array.
And when first checking if it's there it works perfectly fine:
This makes me wonder why Vue is not able to see that it can't iterate null
....
That's also what is stated in the docs, so I guess there's nothing wrong with the generated code. Thanks for the help, it really put me on the right path. I might have to update the Vue example on your webpage to help others.
I'd love to hear how this turns out for you. We've been working towards Vue 3 on our codebase and this will be important for us too.
FYI I'm not associated with the vue-apollo project, just a contributor for some of the typing.
Describe the bug I don't know if this issue is related to the graphql-codegenerator, Vetur, typescript, @vue/appolo-composable or me. So sorry if this is the wrong place to ask. I don't seem to be the only one experiencing this issue. You can find other users on Quasar Framework Discord.
In our Vue project we try to consume the generated code from
useAllaccountsQuery
like described in the docs. The query functions fine and is working as expected but Vetur shows an error message and tab completion (iintellisense) is not working.The return type of
allAccounts
is:But for one reason or another we get the following error message from Vetur and also no intellisense when trying to access properties of
account
. Although the Apollo plugin is setup correctyWhen we try this:
We get the following:![image](https://user-images.githubusercontent.com/10828570/91409006-128f7380-e845-11ea-8b0c-b1b789e0cae1.png)
To Reproduce Steps to reproduce the behavior:
codegen.js
config file:Expected behavior No error message from Vetur and intellisense completion
Environment:
Additional context