Open
Description
Describe the bug
I call this mutation then its returned mutate function:
import { useMutation } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { Assessment } from '@/Assessment/Model'
import { assessmentQuery } from '@/Assessment/Queries'
import { AssessmentType } from '@/Assessment/Type/Enum'
const createAssessmentMutation =
gql`
mutation CreateAssessment(
$type: AssessmentType!,
$organizationId: String!
) {
assessment: createAssessment(
type: $type,
organizationId: $organizationId
) {
__typename,
id
}
}
`
const useCreateAssessmentMutation = () => {
const mutation =
useMutation<{ assessment: Assessment }>(createAssessmentMutation)
const mutate = (type: AssessmentType, organizationId: string) =>
mutation.mutate(
{ type, organizationId },
{
optimisticResponse: {
__typename: 'Mutation',
assessment: {
__typename: 'Assessment',
id: 'new',
type,
organizationId
}
},
update(cache, result) {
console.log('update ', result.data)
cache.writeQuery({
query: assessmentQuery,
variables: { id: result.data.assessment.id },
data: result.data
})
}
}
)
return { ...mutation, mutate }
}
export { useCreateAssessmentMutation }
Then, I call this query with id = 'new'
but the resulted assessment is always null.
I even tried to watch it.
import { useQuery, useResult } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { Assessment } from '@/Assessment/Model'
const assessmentQuery =
gql`
query Assessment($id: String!) {
assessment(id: $id) {
__typename,
id
}
}
`
const useAssessmentQuery = (id: string) => {
const query = useQuery<{ assessment: Assessment }>(assessmentQuery, { id }, { fetchPolicy: 'cache-first' })
const result = useResult(query.result, null, (data) => data.assessment)
return { ...query, result }
}
export { assessmentQuery, useAssessmentQuery, useOrganizationAssessmentsQuery }
To Reproduce
Steps to reproduce the behavior:
- Call mutation
- Then call query with
id = 'new'
- Notice that resulted assessment is always null
Expected behavior
Return the cached optimistic response for assessment, at least before the actual value returns back.
Versions
vue: 2.6.11
@vue/composition-api: 0.5.0
@vue/apollo-composable: ^4.0.0-alpha.8
apollo-client: 2.6.8
Additional context
If you set fetchPolicy to 'cache-only', then the cached optimistic response for assessment is returned correctly.