Amplify-js: graphql-tag support for GraphQL Client

[vahdet]

[Current behavior]
Queries are used as bare strings as shown in official documentation. It just works fine:

import Amplify, { API, graphqlOperation } from "aws-amplify";

const GetEvent = `query GetEvent($id: ID! $nextToken: String) {
    getEvent(id: $id) {
        id
        name
        description
        comments(nextToken: $nextToken) {
            items {
                content
            }
        }
    }
}`;

// Query using a parameter
const oneEvent = await API.graphql(graphqlOperation(GetEvent, { id: 'some id' }));
console.log(oneEvent);

For query declarations, when I want to use graphql-tag as follows:

import Amplify, { API, graphqlOperation } from "aws-amplify";
import gql from "graphql-tag";

// Added 'gql' in front of the string
const GetEvent = gql`query GetEvent($id: ID! $nextToken: String) {
    getEvent(id: $id) {
        id
        name
        description
        comments(nextToken: $nextToken) {
            items {
                content
            }
        }
    }
}`;

// The same query here
const oneEvent = await API.graphql(graphqlOperation(GetEvent, { id: 'some id' }));
console.log(oneEvent);

It breaks down with the error in Developer Console of a browser:

Unhandled promise rejection TypeError: "Must provide Source. Received: [object Object]"

[Requested behavior]

It would be great if graphql-tag is supported to be used as a query in API.graphql(graphqlOperation(...));

[samvincent]

You can do the following for now:

import { print as gqlToString } from 'graphql/language';
...
const oneEvent = await API.graphql(
  graphqlOperation(gqlToString(GetEvent), { id: 'some id' })
);