How can I solve this 400 Error ? "message: "Variable \"$listingId\" of required type \"String!\" was not provided.","

Question

This is my Mongoose Schema

 const mongoose = require('mongoose');
        const ListingSchema = new mongoose.Schema({
            listing_id: {
            type: String,
            required: [true],
            unique: [true]
          },
          listing_title: {
            type: String,
            required: [true]
          },
          description: {
            type: String,
            required: [true]
          },      
          street: {
            type: String,
            required: [true],
          },    
          city: {
            type: String,
            required: true,
          },    
          postal_code: {
            type: String,
            required: [true]
          },    
          price: {
            type: Number,
            required: [true]
          },    
          email: {
            type: String,
            required: true,
            trim: true,
            validate: function(value) {
              var emailRegex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
              return emailRegex.test(value);
            }
          },    
          username: {
            type: String,
            required: [true]
          }          
        });    
        module.exports = mongoose.model('Listing', ListingSchema);

This is my Graphql Schema

const { gql } = require('apollo-server-express');
const { typeDefs } = require('graphql');
 
exports.typeDefs = gql `

    type Listing {
      id: ID!
      listing_id: String!
      listing_title:String!
      description:String!
      street:String!
      city:String!
      postal_code:String!
      price: Float!
      email: String!
      username: String!
    }

    type Mutation {       
        createListing(
          listing_id: String!
          listing_title:String!
          description:String!
          street:String!
          city:String!
          postal_code:String!
          price: Float!
          email: String!
          username: String!
        ):Listing
    },  
 ` 

This is my Graphql resolver

Mutation: {
        createListing: async (parent, args,context) => {
           
                const user = checkAuth(context);
                console.log(user)
                if(user.type=='admin'){
                    
                    let newListing = new Listing({

                    listing_id : args.listing_id,
                    listing_title: args.listing_title,
                    description:args.description,
                    street: args.street,
                    city:args.city,
                    postal_code:args.postal_code,
                    price: args.price,
                    email: args.email,
                    username: args.username
    
                });

                return  await newListing.save();
                }

                else{
                    throw new Error("Customer cannot create a listing");
                }

            },

This is my angular frontend component.ts code

const ADD_NEW_LISTING = gql`
mutation($listingId: String!, $listingTitle: String!, $description: String!, $street: String!, $city: String!, $postalCode: String!, $price: Float!, $email: String!, $username: String!){
  createListing(listing_id: $listingId, listing_title: $listingTitle, description: $description, street: $street, city: $city, postal_code: $postalCode, price: $price, email: $email, username: $username) {
    listing_id
    listing_title
  }
}
`;


@Injectable({
  providedIn: 'root'
})
class AddNewListingService {
  constructor(private apollo: Apollo) {}

  addListing(listing_id: string,listing_title:string,description:string,street:string,city:string,postal_code:string,price:string,email:string,username:string) {
    return this.apollo.mutate({
      mutation: ADD_NEW_LISTING,
      variables: {
        listing_id,
        listing_title,
        description,
        street,
        city,
        postal_code,
        price,
        email,
        username
      }
    });
  }
}

I used the below method to pass data to my MongoDB DB

submit(){
this.addNewListingService.addListing(this.ListingIdControl.value,this.ListingTitleControl.value,this.DescriptionControl.value,this.StreetControl.value,this.CityControl.value,this.PostalCodeControl.value,this.PriceControl.value,this.EmailControl.value,this.UserNameControl.value)
  .subscribe(({ data }) => {
    console.log('got data', data);
    this.router.navigateByUrl('/login')
  }, (error) => {
    console.log('there was an error sending the query', error);
  });

}

But I can see some 400 errors like below in the console

errors  [ {…}, {…}, {…}, {…} ]
0   Object { message: "Variable \"$listingId\" of required type \"String!\" was not provided.", extensions: {…} }
message "Variable \"$listingId\" of required type \"String!\" was not provided."
extensions  Object { code: "BAD_USER_INPUT", exception: {…} }
code    "BAD_USER_INPUT"
exception   Object { stacktrace: […] }
1   Object { message: "Variable \"$listingTitle\" of required type \"String!\" was not provided.", extensions: {…} }
2   Object { message: "Variable \"$postalCode\" of required type \"String!\" was not provided.", extensions: {…} }
3   Object { message: "Variable \"$price\" got invalid value \"werw\"; Float cannot represent non numeric value: \"werw\"", extensions: {…} }

I tested graphql queries by postman. Everything is ok for that. But I can see this error only for "listingId", "listing Title", "postalcode" and "price".I am new to Graphql and Angular. Can anyone please help me to solve this error?

Answer 1

The listingId schema is of Object type and you are telling graphql that it is a string. Try changing that.