optimisticResponse is not working with 'cache-first' fetchPolicy

[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.

[geekox86]

I was trying to dig a little into why this is happening.
It seems that it has to do with this line in the start function of useQuery.ts:

if (!currentResult.loading || currentOptions.value.notifyOnNetworkStatusChange) {
    onNextResult(currentResult as ApolloQueryResult<TResult>)
}

When fetchPolicy is 'cache-only', currentResult.loading is false, therefore onNextResult is called and all work.
However, when fetchPolicy is 'cache-first' or 'cache-and-network', currentResult.loading is true, therefore onNextResult is not called and I get undefined as a result.

Actually, I am not sure why currentResult.loading is true when fetchPolicy is 'cache-first' and the full query can be fulfilled from the cache?!

Regardless, I think we should call onNextResult in order to render the optimisticResponse even if currentResult.loading is true.

There is another option notifyOnNetworkStatusChange but not sure if using it here would be considered an abuse?