简体   繁体   English

如何使用Apollo客户端库创建带有angular参数的graphql查询

[英]How to create a graphql query with arguments in angular using apollo client library

I am working on apollo client library for integrating graphql with angular. 我正在apollo客户端库上工作以将graphql与angular集成在一起。 I am able to do simple queries like findAll without any arguments 我可以进行简单的查询,例如findAll,而无需任何参数

const allData = 
        gql`
        query allData {
          allData {
            id
            fromDate
            toDate
            name
            ...
          }
        }
      `

I am able to fetch result with this query using watchQuery 我可以使用watchQuery来获取此查询的结果

this.data = this.apollo.watchQuery<Query>({query: allData}).valueChanges
      .pipe(
        map(result => result.data.allData)
      );

but I am not able to create a complex query with arguments like 但我无法使用类似参数的方式创建复杂的查询

{
  allDataWithFilter(
    date: {from: "2010-01-16T10:20:10", to: "2019-01-16T11:16:10"}, 
    name: "ABC" {
    allDataWithFilter {
      id
      fromDate
      toDate
      name
            ...      
    }
    totalPages
    totalElements
  }
}

How do I pass date and other arguments in the query? 如何在查询中传递日期和其他参数?

I have defined one of my queries that takes an argument like this: 我定义了一个查询,该查询采用这样的参数:

const ListCalculations = gql`
    query ListCalculations($uid: String!){
        listCalculations(uid: $uid){
            details {
                customer
                part
            }
            selectedUnit {
                imgSrc
            }
        }
    }
`;

($uid: String!) allows me to pass in an argument to the query. ($uid: String!)允许我将参数传递给查询。 Calling the query: 调用查询:

const queryObj:QueryObject = {
    query: ListCalculations,
    variables: { uid: this.authService.cognitoUser.getUsername() },
    fetchPolicy: 'cache-and-network'
};

let obs = client.watchQuery(queryObj);
obs.subscribe(result => console.log(result));

You should read your schema in order to understand what the server needs and should pass the appropriate data with types. 您应该阅读架构,以了解服务器的需求,并应将适当的数据与类型一起传递。 I hope it will be something like this in your case. 希望您的情况像这样。

{
  allDataWithFilter(
    date: {$from: DateTime, $to: DateTime}, 
    name: String {
    allDataWithFilter(from: $from, to: $to) {
      id
      fromDate
      toDate
      name
            ...      
    }
    totalPages
    totalElements
  }
}

When you are calling this query just pass this data in variables like this 当您调用此查询时,只需将此数据传递到像这样的变量中

this.apollo.query({
  query: YourQuery,
  variables: {
   from: new Date(),
   to: someDate
}
})

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用graphql为angular2 + apollo-client创建服务 - How to create service for angular2 + apollo-client with graphql angular 中的apollo client for graphql 如何处理报错? - How to handle error using apollo client in angular for graphql? 使用 graphql 和 apollo 客户端刷新 angular 的令牌 - refresh token for angular using graphql and apollo client 如何在Angular 5中使用GET方法使用Apollo graphql查询 - how to use apollo graphql query using GET method in angular 5 Apollo 客户端 Angular:如何将从查询中获得的数据作为参数传递给 graphql 中的另一个查询? - Apollo Client Angular: how to pass the data obtained from a query as an argument in another query in graphql? 角,阿波罗客户端,graphQL-从graphql查询中选择所有字段 - angular, apollo-client, graphQL - Select all fields from a graphql query 测试Angular Effect + graphql apollo客户端 - Testing Angular Effect + graphql apollo client Graphql - 使用 Apollo 客户端 Angular 的突变操作不起作用 - Graphql - Mutation operation with Apollo Client Angular not working 使用 GraphQl 的 Apollo 客户端时如何在 watchQuery 中使用加载属性 - How to use the loading property in a watchQuery when using the Apollo client for GraphQl GraphQL angular 阿波罗客户端。 从缓存中读取抛出错误,但对服务器的相同查询工作正常 - GraphQL angular apollo-client. Read from cache throw error but the same query to the server works fine
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM