angular - graphql Angular 突变在控制台中显示 "Error: Network error: Cannot read property ' 长度为 null"

Question

我是 graphql 的新手，我的代码有一些问题

我想在我的注册页面数据库中存储一些数据，但我一直在控制台中收到此错误

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)

这是我的 app.module.ts 代码

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(),
    });    
  }
}

这是 test.component.ts 代码

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);
    });
  }
}

我不知道我做错了什么，我该如何解决这个问题以及如何从后端显示错误

Answer 1

您不应该将 header 设置为 null，而是将它们设置为空字符串:

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