angular - graphql 角度突变在控制台中显示“错误:网络错误:无法读取 null 的属性‘长度’”
问题描述
我是 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: "car@gmail.com",
password: "XYZ01-uy92",
Rpassword: "XYZ01-uy92",
fullname: "XYZ",
role: "GUEST"
}
})
.subscribe(data => {
console.log('New post created!', data);
});
}
}
我不知道我做错了什么,我该如何解决这个问题以及如何从后端显示错误
解决方案
You shouldn't set your headers to null
, set them to an empty string instead:
localStorage.getItem('token') || ''
推荐阅读
- typescript - 如何将 yup 的 object.shape 与打字稿一起使用?
- python - 调用类方法但得到'str'对象没有属性'method'错误
- docker - 无法从另一个容器访问 dockerized MySQL 实例
- python - Python,argparse 命令行参数断言错误
- database - 是否有任何特定的 API 可以从 Marklogic DB 中的单个数据库获取多个文档?
- autodesk-forge - 通过 forge 查看器访问的模型的应用程序级别访问管理
- python - openstack Python sdk:执行启动脚本的用户数据
- r - R - 用列中的最大值替换序列值
- c - 让 GStreamer 应用程序接收像流视频或 rtsp 流一样的 FPS?
- html - 为什么angualr生成的最终DOM中有额外的注释标签