问题描述
我是 GraphQL 和 Angular 的新手,我正在尝试构建一个简单的 Angular 组件,该组件使用 GraphQL 从 mongoose 数据库中获取数据。我设置了 GraphQL Express 服务器,它在 graphiql 和 Postman 中运行良好,但 Angular 组件的 http 请求始终失败。这是我的 graphql 模块:
javac
和我的应用组件:
import { NgModule } from '@angular/core';
import { APOLLO_OPTIONS } from 'apollo-angular';
import { ApolloClientOptions,InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
const uri = 'https://localhost:5001/graphql/'; // our GraphQL API
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
return {
link: httpLink.create({ uri }),cache: new InMemoryCache(),};
}
@NgModule({
providers: [
{
provide: APOLLO_OPTIONS,useFactory: createApollo,deps: [HttpLink],},],})
export class GraphQLModule {}
和我的 graphql express 服务器:
import { Component,OnInit } from '@angular/core';
import { Apollo,gql } from 'apollo-angular';
import { Gadget } from './models/Gadget';
const Get_MyGadgets = gql`
query {
MyGadgets {
id
productName
brand
cost
type
}
}
`;
@Component({
selector: 'app-root',styleUrls: ['./app.component.scss'],template: `
<table class="table table-dark table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Product Name</th>
<th scope="col">Brand</th>
<th scope="col">Cost</th>
<th scope="col">Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let gadget of allGadgets">
<td>{{ gadget.id }}</td>
<td>{{ gadget.productName }}</td>
<td>{{ gadget.brand }}</td>
<td>{{ gadget.cost }}</td>
<td>{{ gadget.type }}</td>
</tr>
</tbody>
</table>
`
})
export class AppComponent implements OnInit{
allGadgets: Gadget[] = [];
title = 'ang-graphql-apollo';
constructor(private apollo: Apollo) {}
ngOnInit(): void {
this.apollo.watchQuery<any>({
query: Get_MyGadgets
})
.valueChanges
.subscribe(({ data,loading }) => {
console.log(loading);
console.log(data);
this.allGadgets = data.MyGadgets;
});
}
}
同样,express 服务器在 graphiql 和 Postman 中工作正常,但是当我在浏览器中打开应用程序时,我收到以下错误:
const express = require('express');
const { ApolloServer } = require('apollo-server-express');
const typeDefs = require('./typeDefs');
const resolvers = require('./resolvers');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const startServer = async () => {
const app = express();
const apolloServer = new ApolloServer({
typeDefs,resolvers
});
await apolloServer.start();
apolloServer.applyMiddleware({ app });
app.use((req,res) => {
res.send('Hello from express apollo server');
});
app.use(bodyParser.json());
app.use(cors());
await mongoose.connect('mongodb://localhost:27017/post_db',{
useUnifiedTopology: true,useNewUrlParser: true
});
mongoose.set('useFindAndModify',false);
console.log('Mongoose is connected...');
app.listen(5001,() => console.log('server is running at http://localhost:5001'));
}
startServer();
POST https://localhost:5001/graphql/ net::ERR_SSL_PROTOCOL_ERROR
任何帮助将不胜感激。谢谢!
解决方法
您在本地主机中使用了 SSL
,这是不可能的。因此,Angular
正在尝试通过 https
与您的后端通信。
改变这个
const uri = 'https://localhost:5001/graphql/'; // our GraphQL API
到
const uri = 'http://localhost:5001/graphql/'; // our GraphQL API
你的错误应该会消失。