We have a unique approach to executing our graphql query:
// rosterDispatchGroup.query.graphql
query rosterDispatchGroup($fromDate: DateTime!) {
rosterDispatchGroup(fromDate: $fromDate) {
... on ApiError {
message
}
... on RosterDispatchGroupArray {
data {
date
dispatchGroup
}
}
}
}
This query returns a data array or an error message in the case of an ApiError:
{
"data": {
"rosterDispatchGroup": {
"data": [
{
"date": "2020-10-28",
"dispatchGroup": [ "A" ]
}
]
}
To integrate this data into our Vue template, we follow these steps:
import { useResult } from '@vue/apollo-composable'
import { defineComponent } from '@vue/composition-api'
import { useRosterDispatchGroupQuery } from 'src/graphql/generated/operations'
export default defineComponent({
setup() {
const { result, loading, error } = useRosterDispatchGroupQuery(
() => { return { fromDate: new Date() } },
)
const dispatchGroups = useResult( result, [],
(data) => data.rosterDispatchGroup.data // property data does not exist on type
)
return { dispatchGroups, loading, error }
},
})
While this code functions correctly, it triggers a typescript error message:
https://i.sstatic.net/fHvn9.png
We want to ensure that we are properly handling the result using useResult without encountering any typescript errors. For reference, we utilized a tool like graphql-codegen for generating necessary TypeScript code and drew insights from a tutorial like this one.