Dynamic response from GraphQL mutation

Question

I'm using Apollo-Client to work with a GraphQL back-end (PHP) and have been having some issues with mutations.

The current set of components I'm working on are a form for user details. The details are fetched and displayed with use of a query and can be edited and saved. When a user saves a check is made to decide which values have been changed and these are sent via a mutation to be updated.

The issue I'm having is I'd only like the data which has been updated to be returned from the mutation, as returning every field that could have been updated adds a lot to the response time. Is there a way to dynamically build the mutation to decide which fields are returned?

Heres the mutation in it's current state:

const UPDATE_CLIENT = gql`
mutation updateClient( $data: [ClientInput]! ) {
    add_update_clients( data: $data ) {
        id
        ref
        name {
            title
            firstname
            surname
            preferred_name
        }
        gender
        dob
        nhs_number
        email
        telephone {
            number
        }
        mobile {
            number
        }
        region {
            id
            name
        }
        referral_received
        user_aware_of_referral
        referred_for {
          id
          name
        }
        weekly_hours
        contract_date
        service_start_date
        expected_end_date
        service_end_date
        reason_left
        po_number
        accounting_ref
        country_of_birth {
            id
            name
        }
        nationality {
            id
            name
        }
        ni_number
        place_of_birth
        ethnicity {
            id
            name
        }
        first_language {
            id
            name
        }
        religion {
            id
            name
        }
        marital_status
        dependants
        sexual_orientation
        height
        weight
        hair_colour
        eye_colour
    }
}
`;

And a small piece of code to submit it

const mutation = await client.mutate({
            mutation: UPDATE_CLIENT,
            variables: { data },
            errorPolicy: 'all'
        });

But essentially, if I update dob then that is the only piece of data I'd like in the response

Daniel Rearden Daniel Rearden · Accepted Answer · 2019-09-16T13:58:34

You can use either @skip or @include directives to specify fields that should be omitted from the selection set. If you're keeping track of which fields have been updated client-side, you can use those values to create a set of variables to pass to your query.

mutation updateClient(
  $data: [ClientInput]!
  $includeGender: Boolean = false
  $includeDob: Boolean = false
  $includeEmail: Boolean = false
  # ... and so on
  ) {
  add_update_clients( data: $data ) {
    gender @include(if: $includeGender)
    dob  @include(if: $includeDob)
    email  @include(if: $includeEmail)
    # ... and so on
  }
}

Dynamic response from GraphQL mutation

1 Answers