title: Apollo Client: Variable is not defined. Received status code 400
body: <p>I'm trying to use dynamic variable in a GraphQL query using Apollo Client. I have followed the documentation, but Apollo keeps giving me errors, saying that my variables are not defined, and ultimately responding with status code 400.</p>
  
  <p>Here is what the documentation for Apollo said:</p>
  
  <blockquote>
    <p>mutate: (options?: MutationOptions) => Promise
    A function to trigger a mutation from your UI. You can optionally pass variables, optimisticResponse, refetchQueries, and update in as options, which will override any props passed to the Mutation component. The function returns a promise that fulfills with your mutation result.</p>
  </blockquote>
  
  <p>And here is the code I tried to write:</p>
  
  <pre><code>const fetch = require('node-fetch');
  const ApolloClient = require('apollo-boost').default;
  const gql = require('graphql-tag');
  
  const client = new ApolloClient({
      uri: "http://api.domain.com/graphql",
      fetch
  });
  
  run();
  
  async function run() {
      try {
          const resp = await client.mutate({
              mutation: gql`mutation {
                  trackPr(id: $id, pr: $pr, title: $title, body: $body, state: $state, merged: $merged) {
                      id
                  }
              }`,
              variables: {
                  id: 1,
                  pr: 1,
                  title: "test title",
                  body: "test body",
                  state: "test state",
                  merged: false
              },
          });
  
  
          console.log(resp.data);
      } catch(ex) {
          console.log(ex);
      }
  }
  </code></pre>
  
  <p>I'll then get a error message for each variable saying it has not been defined:</p>
  
  <blockquote>
    <p>[GraphQL error]: Message: Variable "$id" is not defined., Location: [object Object],[object Object], Path: undefined</p>
  </blockquote>
  
  <p>After each of these error messages, I then get a final message with status code 400:</p>
  
  <blockquote>
    <p>[Network error]: ServerError: Response not successful: Received status code 400</p>
  </blockquote>
  
  <p>The mutation itself runs fine without the variables and all the values set directly in the mutation, but I don't know why it thinks the variables are not defined.</p>