feat: Graph config netlify directive (#4239)

README.md

@@ -159,6 +159,7 @@ Manage netlify functions
 
 | Subcommand | description  |
 |:--------------------------- |:-----|
+| [`graph:config:write`](/docs/commands/graph.md#graphconfigwrite) | Write a .graphqlrc.json file to the current directory for use with local tooling (e.g. the graphql extension for vscode)  |
 | [`graph:edit`](/docs/commands/graph.md#graphedit) | Launch the browser to edit your local graph functions from Netlify  |
 | [`graph:handler`](/docs/commands/graph.md#graphhandler) | Generate a handler for a Graph operation given its name. See `graph:operations` for a list of operations.  |
 | [`graph:library`](/docs/commands/graph.md#graphlibrary) | Generate the Graph function library  |

docs/README.md

@@ -116,6 +116,7 @@ Manage netlify functions
 
 | Subcommand | description  |
 |:--------------------------- |:-----|
+| [`graph:config:write`](/docs/commands/graph.md#graphconfigwrite) | Write a .graphqlrc.json file to the current directory for use with local tooling (e.g. the graphql extension for vscode)  |
 | [`graph:edit`](/docs/commands/graph.md#graphedit) | Launch the browser to edit your local graph functions from Netlify  |
 | [`graph:handler`](/docs/commands/graph.md#graphhandler) | Generate a handler for a Graph operation given its name. See `graph:operations` for a list of operations.  |
 | [`graph:library`](/docs/commands/graph.md#graphlibrary) | Generate the Graph function library  |

docs/commands/graph.md

@@ -22,6 +22,7 @@ netlify graph
 
 | Subcommand | description  |
 |:--------------------------- |:-----|
+| [`graph:config:write`](/docs/commands/graph.md#graphconfigwrite) | Write a .graphqlrc.json file to the current directory for use with local tooling (e.g. the graphql extension for vscode)  |
 | [`graph:edit`](/docs/commands/graph.md#graphedit) | Launch the browser to edit your local graph functions from Netlify  |
 | [`graph:handler`](/docs/commands/graph.md#graphhandler) | Generate a handler for a Graph operation given its name. See `graph:operations` for a list of operations.  |
 | [`graph:library`](/docs/commands/graph.md#graphlibrary) | Generate the Graph function library  |
@@ -36,6 +37,23 @@ netlify graph:pull
 netlify graph:edit
 ```
 
+---
+## `graph:config:write`
+
+Write a .graphqlrc.json file to the current directory for use with local tooling (e.g. the graphql extension for vscode)
+
+**Usage**
+
+```bash
+netlify graph:config:write
+```
+
+**Flags**
+
+- `debug` (*boolean*) - Print debugging information
+- `httpProxy` (*string*) - Proxy server address to route requests through.
+- `httpProxyCertificateFilename` (*string*) - Certificate file to use when connecting using a proxy server
+
 ---
 ## `graph:edit`
 

docs/commands/index.md

@@ -97,6 +97,7 @@ Manage netlify functions
 
 | Subcommand | description  |
 |:--------------------------- |:-----|
+| [`graph:config:write`](/docs/commands/graph.md#graphconfigwrite) | Write a .graphqlrc.json file to the current directory for use with local tooling (e.g. the graphql extension for vscode)  |
 | [`graph:edit`](/docs/commands/graph.md#graphedit) | Launch the browser to edit your local graph functions from Netlify  |
 | [`graph:handler`](/docs/commands/graph.md#graphhandler) | Generate a handler for a Graph operation given its name. See `graph:operations` for a list of operations.  |
 | [`graph:library`](/docs/commands/graph.md#graphlibrary) | Generate the Graph function library  |

package.json

@@ -164,6 +164,7 @@
     "url": "https://github.com/netlify/cli/issues"
   },
   "scripts": {
+    "snap": "ava --verbose -u tests/integration/**/*graph*.test.js",
     "prepare": "husky install node_modules/@netlify/eslint-config-node/.husky/",
     "start": "node ./bin/run",
     "test": "run-s format test:dev",
@@ -270,7 +271,7 @@
     "multiparty": "^4.2.1",
     "netlify": "^11.0.0",
     "netlify-headers-parser": "^6.0.1",
-    "netlify-onegraph-internal": "0.0.32",
+    "netlify-onegraph-internal": "0.0.37",
     "netlify-redirect-parser": "^13.0.2",
     "netlify-redirector": "^0.2.1",
     "node-fetch": "^2.6.0",

src/commands/graph/graph-config-write.js

@@ -0,0 +1,55 @@
+// @ts-check
+const fs = require('fs')
+const path = require('path')
+
+const { getNetlifyGraphConfig } = require('../../lib/one-graph/cli-netlify-graph')
+const { NETLIFYDEVERR, chalk, error } = require('../../utils')
+
+/**
+ * Creates the `netlify graph:config:write` command
+ * @param {import('commander').OptionValues} options
+ * @param {import('../base-command').BaseCommand} command
+ * @returns
+ */
+const graphConfigWrite = async (options, command) => {
+  const { site } = command.netlify
+
+  if (!site.id) {
+    error(
+      `${NETLIFYDEVERR} Warning: no siteId defined, unable to start Netlify Graph. To enable, run ${chalk.yellow(
+        'netlify init',
+      )} or ${chalk.yellow('netlify link')}`,
+    )
+  }
+
+  const netlifyGraphConfig = await getNetlifyGraphConfig({ command, options })
+
+  const schemaPath = netlifyGraphConfig.graphQLSchemaFilename.join('/')
+
+  // Support tools that looks for the schema under different keys
+  const graphQLConfig = {
+    schema: [schemaPath],
+    schemaPath: [schemaPath],
+  }
+
+  const filePath = path.resolve(...netlifyGraphConfig.graphQLConfigJsonFilename)
+
+  fs.writeFileSync(filePath, JSON.stringify(graphQLConfig, null, 2))
+}
+
+/**
+ * Creates the `netlify graph:config:write` command
+ * @param {import('../base-command').BaseCommand} program
+ * @returns
+ */
+const createGraphConfigWriteCommand = (program) =>
+  program
+    .command('graph:config:write')
+    .description(
+      'Write a .graphqlrc.json file to the current directory for use with local tooling (e.g. the graphql extension for vscode)',
+    )
+    .action(async (options, command) => {
+      await graphConfigWrite(options, command)
+    })
+
+module.exports = { createGraphConfigWriteCommand }

src/commands/graph/graph.js

@@ -1,4 +1,5 @@
 // @ts-check
+const { createGraphConfigWriteCommand } = require('./graph-config-write')
 const { createGraphEditCommand } = require('./graph-edit')
 const { createGraphHandlerCommand } = require('./graph-handler')
 const { createGraphLibraryCommand } = require('./graph-library')
@@ -20,6 +21,7 @@ const graph = (options, command) => {
  * @returns
  */
 const createGraphCommand = (program) => {
+  createGraphConfigWriteCommand(program)
   createGraphEditCommand(program)
   createGraphHandlerCommand(program)
   createGraphLibraryCommand(program)

src/lib/one-graph/cli-client.js

@@ -16,6 +16,7 @@ const { watchDebounced } = require('../functions/watcher')
 const {
   generateFunctionsFile,
   generateHandlerByOperationId,
+  normalizeOperationsDoc,
   readGraphQLOperationsSourceFile,
   writeGraphQLOperationsSourceFile,
   writeGraphQLSchemaFile,
@@ -231,7 +232,8 @@ const updateGraphQLOperationsFileFromPersistedDoc = async (input) => {
     return
   }
 
-  const doc = persistedDoc.query
+  // Sorts the operations stably, prepends the @netlify directive, etc.
+  const doc = normalizeOperationsDoc(persistedDoc.query)
 
   writeGraphQLOperationsSourceFile(netlifyGraphConfig, doc)
   regenerateFunctionsFileFromOperationsFile({ netlifyGraphConfig, schema })

src/lib/one-graph/cli-netlify-graph.js

@@ -3,7 +3,7 @@ const fs = require('fs')
 const path = require('path')
 const process = require('process')
 
-const { GraphQL, InternalConsole, NetlifyGraph } = require('netlify-onegraph-internal')
+const { GraphQL, GraphQLHelpers, InternalConsole, NetlifyGraph } = require('netlify-onegraph-internal')
 
 const { detectServerSettings, error, execa, getFunctionsDir, log, warn } = require('../../utils')
 
@@ -202,6 +202,10 @@ const getNetlifyGraphConfig = async ({ command, options, settings }) => {
     (userSpecifiedConfig.graphQLOperationsSourceFilename &&
       userSpecifiedConfig.graphQLOperationsSourceFilename.split(path.sep)) ||
     defaultFrameworkConfig.graphQLOperationsSourceFilename
+  const graphQLConfigJsonFilename =
+    (userSpecifiedConfig.graphQLConfigJsonFilename && userSpecifiedConfig.graphQLConfigJsonFilename.split(path.sep)) ||
+    defaultFrameworkConfig.graphQLConfigJsonFilename ||
+    baseConfig.graphQLConfigJsonFilename
   const graphQLSchemaFilename =
     (userSpecifiedConfig.graphQLSchemaFilename && userSpecifiedConfig.graphQLSchemaFilename.split(path.sep)) ||
     defaultFrameworkConfig.graphQLSchemaFilename
@@ -229,6 +233,7 @@ const getNetlifyGraphConfig = async ({ command, options, settings }) => {
     netlifyGraphTypeDefinitionsFilename,
     graphQLOperationsSourceFilename,
     graphQLSchemaFilename,
+    graphQLConfigJsonFilename,
     netlifyGraphRequirePath,
     framework,
     language,
@@ -505,6 +510,7 @@ module.exports = {
   getGraphEditUrlBySiteId,
   getGraphEditUrlBySiteName,
   getNetlifyGraphConfig,
+  normalizeOperationsDoc: GraphQLHelpers.normalizeOperationsDoc,
   parse,
   readGraphQLOperationsSourceFile,
   readGraphQLSchemaFile,