Support for parsed queries (AST)

[kbrandwijk]

If you use graphql-tag, you need to print() your queries when passing them to graphql-request. It would be helpful if you could pass in those AST queries directly.

[schickling]

I understand. Would supporting this require another dependency?

[kbrandwijk]

Very good point @schickling. It would introduce a dependency on graphql-js, which you would already have when using graphql-tag. I think the best option is to make it a peer dependency. That would make the runtime method available only to those who would already have it installed, and it would not increase package size or dependencies for those who don't need it.

[schickling]

That sounds like a good solution. Can you create a PR?

[maxmilton]

Wouldn't this result in "peer dependency unresolved" warnings from npm/yarn when installing the package? Doesn't feel like the best developer experience when all you need is the basic graphql-request functionaly.

[kbrandwijk]

@MaxMilton You are right. I think it should just be a dependency.

[maxmilton]

I'd rather not have any more dependencies when it can be avoided, even polyfills are largely unnecessary. If it must go in then yes, peerDependencies is the correct field for optional/plugin packages.

[Alex-Mann]

It would be nice to support this as the gql template string prefix is the common trigger for graphql syntax highlighting and completion features in quite a few code editors.

[SpaceK33z]

@Alex-Mann I found a rather... hacky... workaround for that, and that is to just make a file, graphql-tag.js with export default tag => tag in it. I then import the file as import gql from './graphql-tag;.

Not a real solution, but it "fixed" syntax highlighting, auto-completion, Prettier and ESLint support.

[schickling]

I agree, I think it would be a useful addition. Can somebody create a PR for this?

[SpaceK33z]

If we want to do this without introducing extra dependencies it could be interesting to just export a gql function (which does nothing except for returning the same arguments), like this:

import { request, gql } from 'graphql-request'

const query = gql`{
  Movie(title: "Inception") {
    releaseDate
  }
}`

[n1ru4l]

This works for me

export function gql(string) {
  return String(string).replace(`\n`, ` `)
}

[wesbos]

Does anyone know how I can turn the GraphQL AST from graphql-tag back into a text query? I'm needing to using my queries with graphql-request

[wesbos]

Figured it out:

import { print } from 'graphql/language/printer';
print(AST);

[kentcdodds]

Is there another way we can support this without making built-in changes to graphql-request? The current solution caused https://github.com/prismagraphql/graphql-request/issues/94

[cyrus-za]

Any update on this? I'd like to use graphql-tag with graphql-request

[leenxyz]

I create an utilitiy to replace graphql-tag:

import gql from 'gql-tag'

const QUERY_TODO = `
  query Todos($id: ID) {
    todo(id: 5) {
      id
      title
    }
  }
`

const GET_TODO_GQL = gql`
  query Todos($id: ID) {
    todo(id: 5) {
      id
      title
    }
  }
`

expect(QUERY_TODO).toBe(GET_TODO_GQL) // pass

Usage:

import { request } from 'graphql-request'
import gql from 'gql-tag'

const query = gql`
  {
    Movie(title: "Inception") {
      releaseDate
      actors {
        name
      }
    }
  }
`
`

request('https://api.graph.cool/simple/v1/movies', query).then(data =>
  console.log(data)
)

[zackify]

Thanks to @wesbos there is a pretty easy solution. Wrap this library like so:

import { GraphQLClient } from 'graphql-request';
import { print } from 'graphql/language/printer';
import { Variables } from 'graphql-request/dist/src/types';
import { ASTNode } from 'graphql';

export const githubGql = (query: ASTNode, variables?: Variables) => {
  const client = new GraphQLClient('https://api.github.com/graphql', {
    headers: {
      authorization: `bearer ${process.env.token}`,
    },
  });

  return client.request(print(query), variables);
};

[talentlessguy]

Any progress on this?

[vasco3]

@zackify I'm going to steal your snippet 👌

[lynxtaa]

I've published https://www.npmjs.com/package/awesome-graphql-client It has support for custom query formatters and GraphQL Upload Spec. Works in NodeJS and browsers. Hope you enjoy!

[Gomah]

v3 fixes this issue I think, cc @jasonkuhrt

[jasonkuhrt]

Thanks @Gomah yep this issue is resolved in v3.