使用JavaScript定义GraphQL查询/突变的聪明方法

Question

Maybe it's just me but I´m pretty much annoyed of defining my GraphQL Queries/Mutations with backticks. The problem here is that, if I have to apply some changes to the query string, it's pretty annoying to reformat the string inside the backticks.

Is there a clever way to define a more readable and maintainable GraphQL Query/Mutation with JavaScript? It's also hard to find missing brackets when the query string is messed up.

I am doing like this right now:

import gql from 'graphql-tag';

export const fancyMutation = gql`
mutation($id: ID!)
{
  delete_something(id:$id) {
    id
    foo
    bar
  }
}
`;

Answer 1

You can also put your queries into their own files, eg with a .graphql or .gql file extension, and use the graphql-tag/loader to load the query from the file where you need it.

Given this query in its own file:

query CurrentUserForLayout {
  currentUser {
    login
    avatar_url
  }
}

With webpack you would need the following configuration:

module: {
  rules: [
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    },
  ],
},

Then you could load it like that:

import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import currentUserQuery from './currentUser.graphql';

class Profile extends Component { ... }
Profile.propTypes = { ... };

export default graphql(currentUserQuery)(Profile)

Update :

You can also have multiple queries in one file:

query MyQuery1 {
  ...
}

query MyQuery2 {
  ...
}

You can then load them like this:

import { MyQuery1, MyQuery2 } from 'query.gql'

Other than that I don't know about other options to define queries inline. The backticks aren't graphql specific. It just uses the es6 template tags like eg styled components does to define inline css. Your only option is to get an IDE that can recognize graphql queries to provide editing help and code highlighting. IntelliJ Editors (IDEA, WebStorm, PyCharm) have a plugin for that like @Victor Vlasenko pointed out.

Answer 2

JS GraphQL WebStorm plugin starting from version 1.4.1 supports embedded GraphQL strings.

From the WebStorm menu select File -> Settings -> Plugins -> Browse repositories and find JS GraphQL plugin. Check that you have at least version 1.4.1 of this plugin installed.

When installed it should highlight braces and let you reformat GraphQL inside string by selecting code block and choosing Code -> Reformat code from IDE menu.

This plugin project page is located here:

https://github.com/jimkyndemeyer/js-graphql-intellij-plugin