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

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.