Skip to content

optimisticResponse is not working with 'cache-first' fetchPolicy #949

Open
@geekox86

Description

@geekox86

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:

  1. Call mutation
  2. Then call query with id = 'new'
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions