问题描述: 在使用Angular-Apollo来进行GraphQL查询时,当查询需要多个变量时,无法正常工作。
解决方法:
确保安装了所需的依赖:
npm install apollo-angular apollo-angular-link-http apollo-link apollo-link-context apollo-link-http apollo-link-error graphql-tag graphql --save
在app.module.ts
中引入所需的模块和服务:
import { HttpClientModule } from '@angular/common/http';
import { ApolloModule, Apollo } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { ApolloLink } from 'apollo-link';
import { InMemoryCache } from 'apollo-cache-inmemory';
// ...
@NgModule({
// ...
imports: [
// ...
HttpClientModule,
ApolloModule,
HttpLinkModule,
],
// ...
})
export class AppModule {
constructor(
apollo: Apollo,
httpLink: HttpLink
) {
const http = httpLink.create({ uri: 'your_graphql_api_url' });
const authMiddleware = new ApolloLink((operation, forward) => {
// 添加你的身份验证逻辑
return forward(operation);
});
apollo.create({
link: authMiddleware.concat(http),
cache: new InMemoryCache(),
});
}
}
在组件中使用Apollo
和Query
来进行GraphQL查询,并传递多个变量:
import { Component, OnInit } from '@angular/core';
import gql from 'graphql-tag';
import { Apollo } from 'apollo-angular';
import { Query } from 'apollo-angular/types';
const GET_DATA = gql`
query GetData($variable1: Type!, $variable2: Type!) {
// 查询逻辑
}
`;
@Component({
// ...
})
export class MyComponent implements OnInit {
constructor(private apollo: Apollo) {}
ngOnInit() {
this.apollo
.watchQuery({
query: GET_DATA,
variables: {
variable1: value1,
variable2: value2,
},
})
.valueChanges.subscribe(({ data }) => {
// 处理返回的数据
});
}
}
以上是解决Angular-Apollo在使用GraphQL多个变量时无法正常工作的方法。