Within my API function, the return type is specified as
Promise<BusinessParameter[]>returnOrderItemBusinessParameters: [] as BusinessParameterThe error message I am encountering is as follows:
[vue-tsc] Type 'BusinessParameter[]' has no properties in common with type '{ __typename?: "BusinessParameter"; id?: number; entity?: string; type?: string; isRequired?: boolean; nameTranslated?: string; descriptionTranslated?: string; technicalName?: string; value?: string; dataArray?: any; }'.
/var/www/app/src/services/businessParametersService.ts:10:5
8 | const result = await businessParametersApi.getBusinessParametersForEntity('ReturnOrderItem')
9 |
> 10 | returnOrderStore.returnOrderItemBusinessParameters = result
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | }
12 |
13 | export { loadBusinessParameters }
Here is how the type definition for BusinessParameter is structured:
export interface BusinessParameter {
__typename?: "BusinessParameter"
id?: Maybe<Scalars["Int"]>
entity?: Maybe<Scalars["String"]>
type?: Maybe<Scalars["String"]>
isRequired?: Maybe<Scalars["Boolean"]>
nameTranslated?: Maybe<Scalars["String"]>
descriptionTranslated?: Maybe<Scalars["String"]>
technicalName?: Maybe<Scalars["String"]>
value?: Maybe<Scalars["String"]>
dataArray?: Maybe<Scalars["JsonObject"]>
}
The structure of my store includes
returnOrderItemBusinessParametersimport { defineStore } from 'pinia'
import { BusinessParameter } from '@/types/graphql/graphql'
export const useReturnOrderStore = defineStore('returnOrder', {
state: () => ({
returnOrderItemBusinessParameters: [] as BusinessParameter,
}),
})
Below is a snippet depicting the API function itself (the response contains an array of BusinessParameters):
import gql from 'graphql-tag'
import { useLazyQuery } from '@vue/apollo-composable'
import { BusinessParameter } from '@/types/graphql/graphql'
import { OptionsParameter } from '@vue/apollo-composable/dist/useQuery'
import { defaultQueryOptions, getGraphQLEndpoint } from '@/services/graphQLService'
export default {
getBusinessParametersForEntity(entity: string): Promise<BusinessParameter[]> {
return new Promise((resolve, reject) => {
const { load: loadBusinessParameters, onResult, onError } = useLazyQuery(gql`
query getBusinessParameterClassifier($entity: String!) {
getBusinessParameterClassifier(entity: $entity) {
id
technicalName
nameTranslated
descriptionTranslated
type
isRequired
dataArray
}
}
`)
loadBusinessParameters()
onResult(result => resolve(result.data.getBusinessParameterClassifier))
onError(error => reject(error))
})
}
}
When the server responds to the API call, the data looks like this:
{
"data": {
"getBusinessParameterClassifier": [
{
"id": 8,
"technicalName": "amount",
"nameTranslated": "Amount",
"descriptionTranslated": "amount",
"type": "decimal",
"isRequired": false,
"dataArray": "[]",
"__typename": "BusinessParameter"
},
]
}
}
Finally, here is the code portion where the API call is made and the resulting data is assigned to
returnOrderItemBusinessParametersconst loadBusinessParameters = async () => {
const result = await businessParametersApi.getBusinessParametersForEntity('ReturnOrderItem')
// Error: Type 'BusinessParameter[]' has no properties in common with type '{ __typename?: "BusinessParameter"; id?: number; entity?: string; type?: string; isRequired?: boolean; nameTranslated?: string; descriptionTranslated?: string; technicalName?: string; value?: string; dataArray?: any; }'
returnOrderStore.returnOrderItemBusinessParameters = result
}