graphql angular 突变在控制台中显示“错误：网络错误：无法读取属性 'length' of null”

Question

i am new to graphql with angular, i have some issues with my code

i want to store some data in my database that is registration page but i keep getting this error in the console

ERROR Error: Network error: Cannot read property 'length' of null
at new ApolloError (bundle.esm.js:63)
at Object.error (bundle.esm.js:1030)
at notifySubscription (Observable.js:134)
at onNotify (Observable.js:165)
at SubscriptionObserver.error (Observable.js:224)
at bundle.esm.js:869
at Set.forEach (<anonymous>)
at Object.error (bundle.esm.js:869)
at notifySubscription (Observable.js:134)
at flushSubscription (Observable.js:116)

here is my app.module.ts code

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HttpHeaders } from '@angular/common/http';
import { ApolloModule, Apollo } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloLink, concat } from 'apollo-link';

@NgModule({ 
  declarations: [
    AppComponent,    
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ApolloModule,
    AppRoutingModule,
    HttpLinkModule,
  ],
  providers: [Title],
  bootstrap: [AppComponent]
 })
 export class AppModule {
  constructor(
    apollo: Apollo,
    httpLink: HttpLink 

  ) {
    const http = httpLink.create({ uri: 'http://localhost:3000/graphql' });
    const authMiddleware = new ApolloLink((operation, forward) => {
      operation.setContext({
        headers: new HttpHeaders().set('Authorization', localStorage.getItem('token') || null)
      });

      return forward(operation);
    });    
    apollo.create({
      link: concat(authMiddleware, http),
      cache :new InMemoryCache(),
    });    
  }
}

and here is the test.component.ts code

import { Component, OnInit } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent  {
  loading = true;
  data: any;
  constructor(private apollo: Apollo) {}

  isEmpty(str) {
    return (!str || 0 === str.trim().length);
  }

  newPost() {
    this.apollo.mutate({
      mutation: gql`mutation($email: String!, $role: String!, $password: String!, $fullname: String!, $username: String!, $Rpassword: String!) {
          signUp(email: $email, role: $role,  password: $password, fullname: $fullname, username: $username, Rpassword: $Rpassword) {
            token
          }
        }
      `,
      variables: {
        username:"sfefs", 
        email: "car@gmail.com", 
        password: "XYZ01-uy92", 
        Rpassword: "XYZ01-uy92", 
        fullname: "XYZ",
         role: "GUEST"
      }
    })
    .subscribe(data => {
      console.log('New post created!', data);
    });
  }
}

i dont what i am doing wrong, how can i solve this issue and also how can i show errors from the back end

Answer 1

You shouldn't set your headers to null , set them to an empty string instead:

localStorage.getItem('token') || ''