GraphQL doesn't create request while using angular HttpClient rather than showing undefined length error

Viewed 22

I am using graphql for login functionality and for creating user in my application. From angular end, creating user is working correctly and i can view my request on network tab which is absolutely fine. But when i try to make a post request for login with email and password the request doesn't work. When i check my query on "localhost:3000/graphql" evrything is fine. I don't understand why it's behaving like this. ** here is my code **

my schema.js file:

type Auth{
       id: ID!
       name: String!
       email: String!
       token: String!
       refreshToken: String!
       expiresIn: String! 
    }
    
    input LoginInputData{
        email: String!
        password: String!
    }

    type RootMutation{
        createUser ( userInput: UserInputData ): User!
    }strong text

    type RootQuery{
        login( loginInput: LoginInputData ): Auth!
    }

    schema{
        query: RootQuery
        mutation: RootMutation
    }

my resolver.js file

const {Product} = require('../models/product')
const {User} = require('../models/user')
const bcrypt = require('bcryptjs')
const validator = require('validator')
const jwt = require('jsonwebtoken');

module.exports = {
    
    createUser: async function({userInput},req){

        const errors = []

        if(!validator.isEmail(userInput.email)){
            errors.push({message:"Invalid Email"})
        }
        if(validator.isEmpty(userInput.passwordHash) ||
            !validator.isLength(userInput.passwordHash,{min:5})){
            errors.push({message:'Password Too Short'})
        }

        if(errors.length > 0){
            const error = new Error('Invlid Input')
            error.data = errors
            error.code = 422
            throw error;
        }

        const user = new User({
            name: userInput.name,
            email: userInput.email,
            passwordHash: bcrypt.hashSync(userInput.passwordHash,10),
            phone: userInput.phone,
            isAdmin: userInput.isAdmin,
            street: userInput.street,
            apartment: userInput.apartment,
            zip: userInput.zip,
            city: userInput.city,
            country: userInput.country
        })

        const createdUser = await user.save()
        return { ...createdUser._doc, _id:createdUser._id.toString()}
    },

    login: async function({loginInput},req){
        const user = await User.findOne({email:loginInput.email})
        const secret = process.env.SECRET;
        if(!user) {
           const error = new Error("User Not Found");
           error.code = 401;
           throw error;
        }

        if(user && bcrypt.compareSync(loginInput.password,user.passwordHash))  {
            // access token
            const token = jwt.sign(
                {
                    userId:user._id,
                    email: user.email,
                    isAdmin:user.isAdmin
                },
                secret,
                {
                    expiresIn: '1d'
                    // expiresIn: '180000'

                }
            )

            // refreshToken

            const refreshToken = jwt.sign(
                {
                    userId:user._id,
                    email: user.email,
                    isAdmin:user.isAdmin
                },
                secret,
                {
                    expiresIn: '1d'
                    // expiresIn: '180000'

                }
            )

            return {
                id:user._id.toString(),
                name:user.name,
                email:user.email,
                token:token,
                refreshToken:refreshToken,
                expiresIn: new Date(new Date().getTime() + 64764000 )  
            };
        }
        else {
            const error = new Error("Incorrect Password")
            error.code = 401
            throw error
        }
    }
}


In my angular end: ( using angular v-14 ) auth.component.ts

// for login
this.graphqlService.login('admin@gmail.com','admin').subscribe((response)=>{
      this.isLoading = false;
        //this.authService.setAuthStatus(response.name,response.email,response.token,response.expriresIn);
        this.router.navigate(['/admin/',])
      },error => {
        console.log(error)
    })


// for creating user 
 this.graphqlService.createUser(this.user)
        .subscribe((response)=>{
          console.log(response)
        if(response.createUser._id){
          this.toastr.success('User Saved')
          this.form.reset();
        }
      },error => {
        let errorMessage = ErrorClass.getErrorMessage(error);
        this.toastr.error(errorMessage);
        console.error(errorMessage);
      })

**auth.service.ts**

export class GraphqlService extends BaseService{

  constructor(http:HttpClient) {
    super(http)
  }

  createUser(user){
    const graphQlQuery = {
      query: `
        mutation {
          createUser(userInput: {
            name: "${user.name}",
            email: "${user.email}",
            passwordHash: "${user.password}",
            phone: "${user.phone}",
            isAdmin: ${user.isAdmin},
            city: "${user.city}",
            street: "${user.street}",
            apartment: "${user.apartment}",
            zip: "${user.zip}",
            country: "${user.country}",
          })
          {
            _id
          }
        }
      `
    }

    return this.http.post<any>(
      graphApi,
      { query: graphQlQuery.query},
      {headers:this.headers})
      .pipe(map((d) => d.data));
  }

  login(email,password){
    const graphqlQuery = {
      query: `
       {
          login(
            email: "${email}",
            password: "${password}",
          )
          {
            id
            name
            email
            token
            refreshToken
            expiresIn
          }
        }
      `
    }
    console.log(graphqlQuery,graphApi)
    return this.http.post<any>(
      graphApi,null,
      // { query: graphqlQuery.query},
      {headers:this.headers,params: new HttpParams().set('query',graphqlQuery.query)})
      .pipe(map((d) => d.data));
  }
}

as i mentioned creating user working properly but login is not working and doesn't create any request here is the ss for creating user : creating user

but for login there is no request. but an error in console : enter image description here

can anyone help me to sort out ?

0 Answers
Related