Apollo: props / cache не обновляется в refetchQueries - PullRequest
Новая
       8

Apollo: props / cache не обновляется в refetchQueries

1 голос
/ 18 марта 2020

Я использую HoC от Apollo для достижения моей текущей мутации, но я немного запутался в нескольких ошибках, которые я получаю:

это мой запрос: 


import gql from 'graphql-tag';

import { careTeamMember } from '../../fragments/careProvider';

const getFullMemberDetails =  gql`
    query getFullMemberDetails($id: ID!) {
        member(id: $id) {
            id
            created_at
            date_of_birth
            first_name
            last_name
            name
            email
            phone
            verified
            informed_consent
            // ....
        }
    }
${careTeamMember}`;

export default getFullMemberDetails;

это мои мутации: 

import gql from 'graphql-tag';

const updateMember = gql`
    mutation UpdateMember($input: UpdateMemberInput!) {
        updateMember(input: $input) {
            success
            member {
                id
                name
                first_name
                last_name
                email
                phone
                date_of_birth
                informed_consent
                hipaa_privacy_policy
                check_in_frequency_days
            }
        }
    }
`;

export default updateMember;

import gql from 'graphql-tag';

const updateMemberInsurancePolicy = gql`
    mutation UpdateMemberInsurancePolicy(
        $member_id: ID!,
        $carrier_name: String,
        $insurance_member_id: String,
        $insurance_group_id: String,
        $plan_name: String,
    ) {
        updateMemberInsurancePolicy(
            member_id: $member_id,
            carrier_name: $carrier_name,
            insurance_member_id: $insurance_member_id,
            insurance_group_id: $insurance_group_id,
            plan_name: $plan_name,
        ) {
            member_insurance_policy {
              id
              carrier_name
              insurance_group_id
              insurance_member_id
              plan_name
              member {
                id
                previsit {
                    id
                    can_schedule
                }
              }
            }
            success
        }
    }
`;

export default updateMemberInsurancePolicy;

и используются вот так 

handleMemberSubmit = async (formData): Promise<any> => {
        try {
            const payload = {
                id    : this.props.data.member.id,
                patch : {
                    first_name         : formData.first_name,
                    last_name          : formData.last_name,
                    date_of_birth      : formData.date_of_birth,
                    phone              : formData.phone,
                    // ....
                    payment_preference : formData.payment_preference ? 'OUT_OF_POCKET' : 'INSURANCE',
                },
            };

            const insurancePayload = {
                member_id           : this.props.data.member.id,
                carrier_name        : formData.insurance_policy.carrier_name,
                plan_name           : formData.insurance_policy.plan_name,
                insurance_group_id  : formData.insurance_policy.insurance_group_id,
                insurance_member_id : formData.insurance_policy.insurance_member_id,
            };

            const [
                updateMemberResponse,
                submitInsuranceResponse,
            ] = await Promise.all([
                this.props.updateMember(payload),
                this.props.submitInsurance(insurancePayload),
            ]);

            const { data: { updateMember } } = updateMemberResponse;
            const { data: { updateMemberInsurancePolicy } } = submitInsuranceResponse;

            return this.props.addNotification('Member updated!', 'success');
        } catch (err) {
            return this.props.addNotification(getFirstError(err), 'error');
        }
    }

и Ho C

    graphql(getFullMemberDetails, {
        options: (ownProps): Object => ({
            id: ownProps.id,
        }),
    }),
    graphql(updateMember, {
        props: ({ mutate }): {updateMember: (input: Object) => Promise<any> } => ({
            updateMember: (input): Promise<any> => mutate({
                variables : { input },
                options   : (props): Object => ({
                    refetchQueries: [{
                        query     : getFullMemberDetails,
                        variables : { id: props.id },
                    }],
                }),
            }),
        }),
    }),

    graphql(updateMemberInsurance, {
        props: ({ mutate }): {submitInsurance: () => {}} => ({
            submitInsurance: (input): Promise<any> => mutate({
                variables: { ...input },
            }),
        }),
    }),

Этот асин * Метод 1032 * работает нормально, но запрос getFullMemberDetails не выполняется после того, как эти два запроса заканчиваются sh.

Однако, когда я перемещаю refetchQueries за пределы options в Ho C , вот так: 

    graphql(updateMember, {
        props: ({ mutate, ownProps }): {updateMember: (input: Object) => Promise<any> } => ({
            updateMember: (input): Promise<any> => mutate({
                variables : { input },
                refetchQueries: [{
                    query     : getFullMemberDetails,
                    variables : { id: ownProps.id },
                }],
            }),
        }),
    }),

my getFullMemberDetails не работает , но я получаю ошибку вроде этого: 

 {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"getFullMemberDetails"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"member"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"created_at"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"date_of_birth"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"first_name"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"last_name"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"name"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"email"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"phone"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"verified"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"informed_consent"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"postal_address"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"street_address_1"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"street_address_2"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"city"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"state"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"zip_code"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"country"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"user"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"time_zone"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"calendar"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cohort"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"name"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"customer"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"name"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"basic_visits_covered"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"specialist_visits_covered"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"dependents_allowed"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"contract_term"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"start_at"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"end_at"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"in_person_supported"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"__typename"}}]}},{"kind":"Field","name":{"kind":"Name","value":"care_team"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"},"arguments":[],"directives":[]},{"kind":"Field","name":{"kind":"Name","value":"care_navigator"},"arguments":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Frabundle.esm.js:63)
    at bundle.esm.js:1246
    at bundle.esm.js:1558
    at Set.forEach (<anonymous>)
    at bundle.esm.js:1556
    at Map.forEach (<anonymous>)
    at QueryManager.push.../../../node_modules/apollo-client/bundle.esm.js.QueryManager.broadcastQueries (bundle.esm.js:1554)
    at bundle.esm.js:1160

и мой кеш / реквизит не работает обновляться. Я что-то не так делаю?

...