Reusing/changing a mutation query instead of having a lot of individual mutation queries with minor differences?

[FPDK]

Hi,

I'm developing a project that has a lot of different tables. In those tables each row often has a switch that will change the entity's "isActive" state.

I would like to have a global "toggleActive" mutation that I can programmatically modify, based on the entity I'm updating. This is to avoid having +30 "toggleActive" mutations with minimal differences..
The hacky solution seems to have a query with template literals, e.g. update${entityName} (input...). But can do something better?

In the example below I would like to change "updateUser" and "user" in the mutation query.
Different entities could be: User (as seen below), Group, Product, Category or Catalog.

I have looked at makeOperation but I'm not sure that will help?

Thanks.

Here is my ActiveButton code:

React, {useState} from "react";
import {useMutation} from "urql";
import * as Icon from "react-feather";

/**
 * @param {string} id
 * @param {boolean} state
 * @param {function} preUpdateCallback - Before the mutation promise is resolved
 * @param {function} postUpdateCallback - When the mutation promise is resolved. Todo: return bool based on success or error.
 * @type {React.NamedExoticComponent<{readonly postUpdateCallback?: *, readonly id?: *, readonly preUpdateCallback?: *, readonly state?: *}>}
 */
const ActiveButton = React.memo(({id, state, preUpdateCallback, postUpdateCallback}) => {

    const [active, setActive] = useState(state);

    const [, updateTodo] = useMutation(`
            mutation ($id: ID!, $isActive: Boolean) {
                updateUser (input: { # I would need to change updateUser to updateCategory or something else
                    id: $id
                    isActive: $isActive
                }) {
                    user{ # I would need to change user to category or something else
                        id
                        isActive
                    }
                }
            }
        `);

    /**
     * Change active state
     */
    const handleClick = () => {
        preUpdateCallback()

        const variables = {id, isActive: !active}

        updateTodo(variables)
            .then(() => {
                setActive(prevState => !prevState)
                postUpdateCallback()
            })
            .catch(error => {
                postUpdateCallback()
                alert("Error updating the entity. Todo: Return specific error.")
                throw new Error(error)
            })
    };

    /**
     * Render checkmark or X
     */
    return <div
        key={id}
        onClick={() => handleClick()}
        style={{cursor: "pointer"}}
    >
        {active
            ? <Icon.CheckCircle
                style={{color: "#3ca861"}}
                className="feather mr-2 float-left"
            />
            : <Icon.XCircle
                style={{color: "#d9534f"}}
                className="feather mr-2 float-left"
            />
        }
    </div>
})

export default ActiveButton

[kitten]

I suppose this is more of a general GraphQL question as it concerns queries and writing queries. There’s nothing wrong with using templates for your queries and that’ll work just fine.

That being said, you may miss out on type generation in the future if you do so and if you want to look into GraphQL Code Generator now rather than later you may be able to prevent some headaches.

That being said, suppose all of your GraphQL API is controlled by you because either you wrote it or a team did that communicates with you, in that case I’d recommend interfaces.

Your API can literally have a Mutation.setActive field that accepts an ID (and maybe a type name if your ID isn’t globally unique). This field could return an Active interface type.

So depending on which object you’re setting active on it could return different types, all from one field, as long as all objects with the isActive flag field implement this interface.

• https://graphql.org/learn/schema/#interfaces
• https://www.apollographql.com/docs/apollo-server/schema/unions-interfaces/

[FPDK]

Thank you. I will definitely discuss interfaces with my team.