Mutation Templates with prop value - Vue3

[rabrowne85]

Hi All,

I'm trying to write a set of "default" Mutations to handle some of the basics i.e. delete, restore etc. The form of the mutation follows something like this:

mutation delete ($id: ID!) {
    deleteSomeName (id: $id) {
        id
    }
}

This applies to a number of models that only change the SomeName part so it seems logical to make SomeName a variable and be able to pass the name to the generator.

I've put this together:

// File: graphql.js
export const deleteMutationTemplate = ({
    typeName
}) => gql `
mutation delete ($id: ID!) {
    delete${typeName} (id: $id) {
        id
    }
}
`;

// DeleteComponent.vue
import {
    deleteMutationTemplate
} from "@/graphql";
import { useMutation } from "@vue/apollo-composable";
export default {
    props: {
        type: String,
    },
    setup(props) {

        const deleteMutation = computed(() => {
            return deleteMutationTemplate(props.type);
        });
        console.log(deleteMutation.value);

        const { mutate: deleteItem } = useMutation(deleteMutation.value);

        return {
            deleteItem
        };
    }
};

However this isn't quite working - this resolves to deleteundefind (id:... which obviously isn't of any use.

Does anyone have any suggestions on how to do this sort of thing?

Many thanks in advance.

[rabrowne85]

So, as is generally the case, I write a post and then answer it myself 🤦

I wasn't actually that far away. These are the necessary changes:

1. Change the definition of the deleteMutationTemplate to the following:

export const deleteMutationTemplate = (typeName) => gql `
mutation delete ($id: ID!) {
    delete${typeName} (id: $id) {
        id
    }
}
`;

This now expects a single parameter to be passed, rather than an object as before.

2. The mutation no longer needs to be computed and can be "simplified" as follows:

const { mutate: deleteItem } = useMutation(
    deleteMutationTemplate(props.type),
    {
        variables: {
            id: props.item.id
        }
    }
);

This then allows you to use the props passed to the component whilst minimising the number of "specific" mutations to do the basic deletes etc.

You just need to call the function name deleteItem() from somewhere in the component to get it to run.

Hopefully this helps someone else in the future too.