Closed DarkLite1 closed 3 years ago
bbugh
commented
4 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) 
DarkLite1
commented
3 years ago 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.
DarkLite1
commented
3 years ago 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.
DarkLite1
commented
3 years ago 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:
bbugh
commented
3 years ago 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.
bbugh
commented
3 years ago 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.
DarkLite1
commented
3 years ago 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.
DarkLite1
commented
3 years ago 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....
DarkLite1
commented
3 years ago 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.
bbugh
commented
3 years ago 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
useAllaccountsQuerylike 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
allAccountsis: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:
To Reproduce Steps to reproduce the behavior:
codegen.jsconfig file:Expected behavior No error message from Vetur and intellisense completion
Environment:
Additional context