GraphQL Storefront API: Field 'products' doesn't accept argument 'id'

[codemonkey]

I'm using Apollo and GraphQL with the Storefront API.

query getProduct($id: String!) {
  products(id: $id) {
    edges {
      cursor
      node {
        id
        vendor
        title
        descriptionHtml
        availableForSale
        images(first: 10) {
          edges {
            node {
              altText
              src: originalSrc
            }
          }
        }
        variants(first: 50) {
          edges {
            node {
              id
              availableForSale
              compareAtPrice
              title
              price
            }
          }
        }
      }
    }
  }
}

[codemonkey]

Using GraphiQL the following works:

query getProduct {
  product(id: "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzE1NDM4ODM3MTg3MTE=") {
    id
    vendor
    title
    descriptionHtml
    images(first: 10) {
      edges {
        node {
          altText
          src: originalSrc
        }
      }
    }
    variants(first: 50) {
      edges {
        node {
          id
          availableForSale
          compareAtPrice
          title
          price
        }
      }
    }
  }
}

However, this does not:

query getProduct($id: ID!) {
  product(id: $id) {
    id
    vendor
    title
    descriptionHtml
    availableForSale
    images(first: 10) {
      edges {
        node {
          altText
          src: originalSrc
        }
      }
    }
    variants(first: 50) {
      edges {
        node {
          id
          availableForSale
          compareAtPrice
          title
          price
        }
      }
    }
  }
}

I'm given the error: GraphQL error: Field 'product' doesn't exist on type 'QueryRoot'

[codemonkey]

My Apollo connection:

this.apollo.create({
  cache: new InMemoryCache(),
  link: new HttpLink(this.http).create({
    uri: `https://${environment.shopify_domain}/api/graphql`,
    headers: new HttpHeaders().set('X-Shopify-Storefront-Access-Token', environment.shopify_storefront_access_token),
  })
});

And the query:

public product(id: string): Promise<any> {
  this.presentLoading();
  return new Promise((resolve, reject) => {
    this.apollo.query({ query: product, variables: { id } }).toPromise().then((result) => {
      resolve(defaultResolver('product', result));
    }).catch((reason) => {
      console.error(reason);
      reject(reason);
    }).finally(() => this.loadingDismiss());
  });
}