I cannot for the life of me properly query a mutation on the frontend while using with-input plugin

[wakywayne]

All I want to do is add an item to the items array in my Cart object.

What I am trying to do is simply execute my backend addItem mutation. After that I want to manually update the cache, but for now I am just re-fetching the query because I am unable to even successfully get the query to run.

In this code I am using the pothos withinput plugin: link to docs

I have tried:

1. Just putting the hardcoded input object into the addItem hook
2. Listing each Variable out one by one into the addItem hook
3. Describing the types of each prop in the original gql MUTATION
4. And passing the hardcoded input into the addItem hook via variables object
5. Passing hardcoded values into the actual addItem mutation
6. I have tried inputting the proper typing via a gql tag example below:

    const THE_TYPE = gql`input addItemInput { 
  cartId: String!
  id: String!
  name: String!
  price: Float!
}
`



    const MUTATION = gql`
mutation AddItem($input: MutationAddItemInput) {
  addItem(input: $input){carts{
id
items{
name
}}}}
`;

*When I run the following mutation in my graphiql interface it works:

mutation MyMutation{
addItem(input:{
  cartId: "2",
  id: "12",
  name: "New Item!",
  price: 1900,
}){
  items{
    name
  }
}}

However when I run the mutation below I get a 400 error:

Error: Response not successful: Received status code 400

import { useQuery, gql, useMutation } from '@apollo/client';

export default function DisplayCarts() {

    interface Cart {
        id: string;
        items: string[];
    }

    interface Items {

    }

    const GET_CARTS = gql`
query {
carts{
id
items{
name
}}} `;



    const MUTATION = gql`
mutation AddItem($input: Any) {
addItem(input: $input){
carts{
id
items{
name
}}
}}`;




    const { loading, error, data } = useQuery(GET_CARTS)

    const [addItem] = useMutation(MUTATION, {

        refetchQueries: [{ query: GET_CARTS }]


        // update(cache, { data: { addItem } }) {
        // addItem is the response of the query of add item function         
        // console.log(data);
        // @ts-ignore
        //     const { carts } = cache.readQuery({ query: GET_CARTS });

        //     cache.writeQuery({
        //         query: GET_CARTS,
        //         data: { carts: [...carts, addItem] }
        //     })
        // }
    })



    function AddTodo() {
        let theInput = {
            cartId: "2",
            id: "12",
            name: "New Item!",
            price: 1900,
            quantity: 2
        }
        // @ts-ignore
        addItem({ variables: { input: theInput } });
    };

Here is my backend resolver function using pothos

Keep in mind my query does work in my graphiql interface so the issue is probably not on the backend

builder.mutationType({
    fields: (t) => ({
        addItem: t.fieldWithInput({
            input: {
                cartId: t.input.string({ required: true }),
                id: t.input.string({ required: true }),
                name: t.input.string({ required: true }),
                price: t.input.int({ required: true }),
                quantity: t.input.int({ required: true, defaultValue: 1 }),
            },
            type: Cart,
            resolve: (_, { input: { cartId, ...input } }) => {
                const cart = CARTS.find((cart) => cart.id === cartId);

                if (!cart) {
                    throw new Error(`Cart with id ${cartId} not found`)
                }

                return {
                    id: cartId,
                    items: [...cart?.items, input]
                }
            }
        }),
    }),
})

[hayes]

 const MUTATION = gql`
mutation AddItem($input: Any) {
addItem(input: $input){
carts{
id
items{
name
}}
}}`;

I'm not sure what this is doing, but the Any type there doesn't really make sense. You probably just need to replace that with the name of your input type: MutationAddItemInput

[hayes]

Another this I noticed here is that you have an extra carts field there in your query. It looks like the mutation returns a Cart type, but the query has trying to select addItem(...).carts.items.

Here is a working example:

https://stackblitz.com/edit/typescript-a86epg?file=index.ts

[wakywayne]

Thank you the problem was the way that pothos automatically formats the types when using the with-input plugin

From the docs

builder.queryType({
  fields: (t) => ({
    example: t.fieldWithInput({
      input: {
        // Note that this uses a new t.input field builder for defining input fields
        id: t.input.id({ required: true }),
      },
      type: 'ID',
      resolve: (root, args) => args.input.id,
    }),
  }),
});

This will produce a schema like:

type Query {
  example(input: QueryExampleInput!): ID!
}

input QueryExampleInput {
  id: ID!
}

The input name will default to ${ParentType.name}${Field.name}Input.

Here is the correct mutation for my case:

    const MUTATION = gql`
  mutation AddItem($input:MutationAddItemInput!) {
    addItem(input: $input){
            items{
                id
                name
            }
        }
    }
`;