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

Question

I am working on apollo client library for integrating graphql with angular. I am able to do simple queries like findAll without any arguments

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

I am able to fetch result with this query using 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?

Manzur Khan · Accepted Answer · 2019-01-18 12:04:56Z

2

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
}
})

answered Jan 18, 2019 at 12:04

Manzur Khan

2,5164 gold badges26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1298426 Over a year ago

The date object doesn't work and gives error on server side. stackoverflow.com/questions/54258287/…

robbannn · Accepted Answer · 2019-01-18 10:21:42Z

1

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. 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));

answered Jan 18, 2019 at 10:21

robbannn

5,0231 gold badge35 silver badges48 bronze badges

2 Comments

user1298426 Over a year ago

I am able to send query with string but not with custom object date which has from and to. Can you please tell me how your code will work with those fields.

robbannn Over a year ago

I suggest you open a seperate question for that. This question was about passing arguments to queries.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related