How to best store data locally - useMutation vs writeQuery

Feedback
,
1

I’m using Apollo Client 3 for my NextJS project.

What I need to do is save nested data locally. I first implemented a function with reactive variables but from my experience, it’s not the best approach when dealing with nested data.

What I found out work best so far is the client.writeQuery({ query: MUTATION, data: { ...data } ) method.

This approach seems to work out of the box, you don’t even need to add the type definitions for the data when you init ApolloClient, and all the useQuery watches the data and it is displayed correctly.

Display Group Mutation

const DISPLAY_GROUP_MUTATION = gql`
mutation UpdateDisplayGroup {
    displayGroup @client {
        id
        alias
        name
        display {
            id
            alias
            name
            show
            options {
                id
                type
                alias
                value
            }
        }
    }
}`

Display Group Mutation - Called when pressing a button

client.writeQuery({
    query: DISPLAY_GROUP_MUTATION,
    data: {
        displayGroup: {
            id: 'display-group',
            alias: 'display-group',
            name: 'Display Group',
            display: [
                {
                    id: 'display-1',
                    alias: 'display-1',
                    name: 'Display 1',
                    show: true,
                    options: [
                        {
                            id: 'display-1-option-1',
                            type: 'toggler',
                            alias: 'option-1',
                            value: true
                        }
                    ]
                },
                {
                    id: 'display-2',
                    alias: 'display-2',
                    name: 'Display 2',
                    show: true,
                    options: [
                        {
                            id: 'display-2-option-1',
                            type: 'toggler',
                            alias: 'option-1',
                            value: true
                        },
                        {
                            id: 'display-2-option-2',
                            type: 'radio',
                            alias: 'text-size',
                            value: 'text-lg'
                        },
                        {
                            id: 'display-2-option-text-color',
                            type: 'color',
                            alias: 'text-color',
                            value: '#febbcb'
                        }
                    ]
                }
            ]
        }
    }
})

Now I tried the useMutation method but without any success and it seems to be more complicated to achieve the same result.

Display Group mutation for useMutation

const DISPLAY_GROUP_MUTATION_2 = gql`
mutation UpdateDisplayGroup($alias: String!, $name: String!, $id: ID!) {
    displayGroup @client {
        id
        alias
        name
    }
}`

useMutation inisiation

const [updateDisplayGroup, { loading, error }] = useMutation(DISPLAY_GROUP_MUTATION_2 })

useMutation - Called when pressing a button

        updateDisplayGroup({
        variables: {
            id: 'display-group',
            alias: 'display-group',
            name: 'Display Group useMutation'
        }
    })

Although I don’t get any errors, the data is not tuched. And I do have type defs added when initiating ApolloClient

const typeDefs = gql`
type DisplayGroup {
    id: Int!
    alias: ID!
    name: String
    display: [Display]
}

type Display {
    id: Int!
    alias: ID!
    name: String
    show: Boolean
    options: [Option]
}

type Option {
    id: Int!
    alias: ID!
    value: String
    type: String
}

# the schema allows the following query:
type Query {
    displayGroup: [DisplayGroup]
}

# this schema allows the following mutation:
type Mutation {
    displayGroup(id: Int!): DisplayGroup
}`

Why is the useMutation approach not successful? Is my writeQuery approach the absolute smoothest way to store data locally? Is there something else I’m missing here?

2

The point of useMutation is to send a request to the server - mutations used that way will not modify the local cache, just as calling client.mutate would not.

For what you are doing here, writeQuery or writeFragment are the way to go. See this documentation page.

1 Like