0

I'm using angular-apollo lib to call backend graphql. I want to reuse my queries generated by gql function. It means I need to use variables, but when I write query like this:

this.apollo.watchQuery<MyQuery>({
          query: gql`
            {
              bar(id: $foo) {
                id
            }
          `,
          variables: {
            $foo: 'bar',
          },
        }).valueChanges

I'm getting not replaced placeholder $foo on the server-side:

...  WARN 16956 --- [nio-8080-exec-8] graphql.GraphQL                          : Query failed to validate : '{
  bar(id: $foo) {
    id

I'm using following apollo npm packages:

    "apollo-angular": "^1.7.0",
    "apollo-angular-link-http": "^1.8.0",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",

Example: https://stackblitz.com/edit/basic-apollo-angular-app-fyykeq?file=src%2Fapp%2Fexchange-rates%2Fexchange-rates.component.ts

Does anyone have an idea what I'm doing wrong?

Dzmitry Atkayey
  • 332
  • 5
  • 12
  • 1
    Variables must be declared in the operation definition before they are used as shown [here](https://stackoverflow.com/questions/54329598/apollo-client-variable-is-not-defined-received-status-code-400/54332801#54332801). Additionally, even though the variable name is prefixed with a `$` inside the GraphQL document, it should be passed in without it in Apollo (i.e. `foo: 'bar'`). – Daniel Rearden Sep 10 '19 at 13:35
  • just a note: Approach what I use initially is work for update store: `store.readQuery<...>({query: myQuery, variables: {id: this.id}});` – Dzmitry Atkayey Sep 11 '19 at 09:47

0 Answers0