使用Angular从GraphQL返回数据的解决方法可以分为以下步骤:
安装所需的依赖项:
npm install apollo-angular apollo-angular-link-http graphql graphql-tag --save
在Angular应用的根模块中导入所需的模块:
import { NgModule } from '@angular/core';
import { ApolloModule, Apollo } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
// 其他模块
HttpClientModule,
ApolloModule,
HttpLinkModule
],
// 其他配置
})
export class AppModule {
constructor(apollo: Apollo, httpLink: HttpLink) {
const http = httpLink.create({ uri: 'YOUR_GRAPHQL_ENDPOINT' }); // 替换为您的GraphQL端点
apollo.create({
link: http,
cache: new InMemoryCache()
});
}
}
创建一个服务来执行GraphQL查询并返回数据:
import { Injectable } from '@angular/core';
import { Apollo } from 'apollo-angular';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import gql from 'graphql-tag';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private apollo: Apollo) { }
getSomeData(): Observable {
return this.apollo.query({
query: gql`
query {
yourQuery {
// 执行您的查询
}
}
`
}).pipe(
map(result => result.data)
);
}
}
在需要使用数据的组件中注入并调用服务:
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-my-component',
template: `
`
})
export class MyComponent {
data$: Observable;
constructor(private dataService: DataService) { }
ngOnInit() {
this.data$ = this.dataService.getSomeData();
}
}
这样,您就可以使用Angular从GraphQL返回数据了。请记得将代码中的YOUR_GRAPHQL_ENDPOINT
替换为您的实际GraphQL端点。