graphql 角度突变在控制台中显示“错误：网络错误：无法读取 null 的属性‘长度’”

Posted 2023-03-08

【中文标题】graphql 角度突变在控制台中显示“错误：网络错误：无法读取 null 的属性‘长度’”

【英文标题】：graphql angular mutation showing "Error: Network error: Cannot read property 'length' of null" in console

【发布时间】：2020-02-06 02:41:02

【问题描述】：

我是 angular 的 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: "[e-mail]", 
        password: "XYZ01-uy92", 
        Rpassword: "XYZ01-uy92", 
        fullname: "XYZ",
         role: "GUEST"
      
    )
    .subscribe(data => 
      console.log('New post created!', data);
    );
  

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

【问题讨论】：

这听起来像是与@auth0/angular-jwt有关，而不是apollo-client。

它与 @auth0/angular-jwt 的关系，而不是 apollo-client

如果我知道，我会提供完整的答案而不是评论。但是在任何 Apollo 库中都没有 tokenGetter 属性，而在 @auth0/angular-jwt 中有一个。我不使用该库，因此无法提供任何其他帮助。

好的，我删除了@auth0/angular-jwt，现在我得到了这个错误“网络错误：无法读取属性'长度'为空”

【参考方案1】：

您不应该将标题设置为null，而是将它们设置为空字符串：

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