Support (or document?) Outputting "compiled" graphql queries

[adamhaney]

Thanks for this library. It's super helpful and I use it heavily.

I have several queries with "deeply nested" fragments, and I regularly want to copy my queries into graphiql for debugging the output of the query. The issue is that I then end up having to go file by file copying all of my included fragments, I have some queries that include several fragments and some of those fragments include their own fragments. It would be awesome if there was an easy way to out put the "entire query" (with all of the included fragments at the top of the file) in a format that could easily be copied and pasted into graphiql/Insomnia/graphql-tool-of-choice.

I've thought of hacking together a cli tool myself but it seems like the imported query objects are js objects not the "raw" graphql query text so I'm a little lost. Is there already a way to do this with the existing library and/or would it be possible to add it?

[detrohutt]

out put the "entire query" (with all of the included fragments at the top of the file) in a format that could easily be copied and pasted

I'm not sure I completely understand where you want the output to go.. Are you talking about outputting the query in the babel-compiled .js file? If so, you can try using the runtime option available in the newest version of babel-plugin-import-graphql (I changed the name recently and the newest features are only available under the new name). The runtime option outputs the full query source text and runs that through the gql function.

[detrohutt]

If you're using the babel-plugin-inline-import-graphql-ast package, there's a section at the top of the README on how to migrate to the newly renamed package.

[detrohutt]

P.S. - you can also use the Apollo Client Developer Tools browser extension to run your queries/mutations in graphiql

[adamhaney]

I'm working on a react-native project and I have never managed to get the chrome plugin to work with the project, not sure if that's a support issue or user error on my part :/

I spent the last hour or so reading through the source code and hacked together a small script that allows me to output an arbitrary file with all of it's #import statements to stdout. Included below if anyone else has a similar issue.

/*
* A Quick hacked together tool to resolve #import statements in gql
*
* Usage:
* node ./output-compiled-query.js QueryFile.graphql
*/

/* eslint-disable */

const gql = require("graphql-tag").default;
const fs = require("fs");
const path = require("path");

const newlinePattern = /(\r\n|\r|\n)+/;

function stripImportStatements(src) {
  return src
    .split(newlinePattern)
    .filter(line => !line.startsWith("#import"))
    .join("");
}

function addIncludes(filePath) {
  console.log("\n\n# Included From: ", filePath);
  src = fs.readFileSync(filePath).toString();
  console.log(stripImportStatements(src));
  imports = src
    .split(newlinePattern)
    .filter(line => line.startsWith("#import"))
    .map(line =>
      line
        .replace("#import", "")
        .replace(/^\s+|\s+$/g, "")
        .replace('"', "")
        .replace('"', "")
        .toString()
    );

  importPaths = imports.map(imp => path.join(path.dirname(filePath), imp));
  importPaths.map(imp => addIncludes(imp));
}

// Main
if (process.argv.length == 3) {
  addIncludes(process.argv[2]);
} else {
  console.log("Usage: ", process.argv[0], " <Query.graphql>");
}