diff --git a/README.md b/README.md index f01b054d368..181375c0ad9 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ The purpose of this monorepo is to give the GraphQL Community: ### Proposed Ecosystem -As we re-write for `graphiql@2.x` ecosystem, this monorepo will contain an sdk and plugins. +As we re-write for `graphiql@2.x` ecosystem, this monorepo will contain a sdk and plugins. ![Diagram of the proposed Monorepo and third party ecosystem](https://raw.githubusercontent.com/graphql/graphiql/main/resources/images/proposed-ecosystem.jpg) @@ -65,7 +65,7 @@ The GraphiQL IDE, implemented in React, currently using [GraphQL mode for CodeMi ### How To Setup/Implement GraphiQL -[codesandbox.io graphiql exmaple](https://codesandbox.io/s/graphiql-js-example-oc851) +[codesandbox.io graphiql example](https://codesandbox.io/s/graphiql-js-example-oc851) [stackblitz.com graphiql example](https://stackblitz.com/edit/react-ts-jpnmod) **The [GraphiQL Readme](packages/graphiql#readme) explains** some of the ways to implement GraphiQL, and we also have the [examples](examples) directory as well! @@ -79,7 +79,7 @@ The GraphiQL IDE, implemented in React, currently using [GraphQL mode for CodeMi Provides monaco editor with a powerful, schema-driven graphql language mode. -See the [webpack example](examples/monaco-graphql-webpack#readme) for a plain javascript demo using github API +See the [webpack example](examples/monaco-graphql-webpack#readme) for a plain javascript demo using GitHub API ## [`codemirror-graphql`](packages/codemirror-graphql#readme) diff --git a/packages/codemirror-graphql/README.md b/packages/codemirror-graphql/README.md index f0184aaaae7..984f9a3cfcf 100644 --- a/packages/codemirror-graphql/README.md +++ b/packages/codemirror-graphql/README.md @@ -12,7 +12,7 @@ typeahead hinter powered by your GraphQL Schema. ### Getting Started -``` +```sh npm install --save codemirror-graphql ``` diff --git a/packages/graphiql-2-rfc-context/README.md b/packages/graphiql-2-rfc-context/README.md index 8ebde23d27c..a7dedbd4bcc 100644 --- a/packages/graphiql-2-rfc-context/README.md +++ b/packages/graphiql-2-rfc-context/README.md @@ -2,13 +2,13 @@ # GraphiQL 2.x - React Context RFC Proposal -This effort was merge to master in spring of 2020, and then moved to this workspace for the time being until we address some of the issues +This effort was merged to master in spring of 2020, and then moved to this workspace for the time being until we address some of the issues ## Features - hooks rewrite for react 16. _gets rid of deprecated methods_ - swap out codemirror for monaco -- partial re-themeing with new component library and a customizeable`theme-ui` +- partial re-theming with new component library and a customizable `theme-ui` - context implementation - i18n using `i18n-next` diff --git a/packages/graphiql/README.md b/packages/graphiql/README.md index 4e92592c06b..10afc9c5e3f 100644 --- a/packages/graphiql/README.md +++ b/packages/graphiql/README.md @@ -55,7 +55,7 @@ You can use the `graphiql` module, however bear in mind that `react` `react-dom` With `npm`: -``` +```sh npm install --save graphiql react react-dom graphql ``` @@ -67,7 +67,7 @@ yarn add graphiql react react-dom graphql ### UMD -With `unpkg`/`jsdelivr`, etc: +With `unpkg`/`jsdelivr`, etc.: ```html diff --git a/packages/graphql-language-service-cli/README.md b/packages/graphql-language-service-cli/README.md index 5e2560ad4e2..4a4a202745c 100644 --- a/packages/graphql-language-service-cli/README.md +++ b/packages/graphql-language-service-cli/README.md @@ -37,13 +37,13 @@ Only node 9 or greater, and npm or yarn are required dependencies. with `yarn`: -``` +```sh yarn global add graphql-language-service-cli ``` with `npm`: -``` +```sh npm i -g graphql-language-service-cli ``` @@ -64,8 +64,7 @@ The custom graphql language configurations are: The node executable contains several commands: `server` and the command-line language service methods (`validate`, `autocomplete`, `outline`). -``` - +```text GraphQL Language Service Command-Line Interface. Usage: graphql-lsp diff --git a/packages/graphql-language-service-server/README.md b/packages/graphql-language-service-server/README.md index 9b7efeafa14..8f90d8b64b8 100644 --- a/packages/graphql-language-service-server/README.md +++ b/packages/graphql-language-service-server/README.md @@ -25,7 +25,7 @@ Supported features include: ### Dependencies -An LSP compatible client with it's own file watcher, that sends watch notifications to the server. +An LSP compatible client with its own file watcher, that sends watch notifications to the server. **DROPPED**: GraphQL Language Service no longer depends on [Watchman](https://facebook.github.io/watchman/) @@ -89,7 +89,9 @@ extensions: #### `.graphqlrc` or `.graphqlrc.json` or `graphql.config.json` ```json -{ "schema": "https://localhost:8000" } +{ + "schema": "https://localhost:8000" +} ``` #### `graphql.config.js` or `.graphqlrc.js` @@ -117,7 +119,7 @@ await startServer({ // rootDir is same as `configDir` before, the path where the graphql config file would be found by cosmic-config rootDir: 'config/', // or - the relative or absolute path to your file - filePath: 'exact/path/to/config.js' // (also supports yml, json, ts, toml) + filePath: 'exact/path/to/config.js', // (also supports yml, json, ts, toml) // myPlatform.config.js/json/yaml works now! configName: 'myPlatform', }, @@ -130,13 +132,13 @@ The graphql-config features we support are: module.exports = { extensions: { // add customDirectives *legacy*. you can now provide multiple schema pointers to config.schema/project.schema, including inline strings - "customDirectives": ["@myExampleDirective"], - // a function that returns rules array with parameter `ValidationContext` from `graphql/validation` - "customValidationRules": require('./config/customValidationRules') - "languageService": { + customDirectives: ["@myExampleDirective"], + // a function that returns rules array with parameter `ValidationContext` from `graphql/validation` + customValidationRules: require('./config/customValidationRules'), + languageService: { // should the language service read schema for lookups from a cached file based on graphql config output? cacheSchemaFileForLookup: true - // NOTE: this will disable all definition lookup for local SDL files + // NOTE: this will disable all definition lookup for local SDL files } } } diff --git a/packages/graphql-language-service/README.md b/packages/graphql-language-service/README.md index 37f3f5cc20d..4fc05801fb5 100644 --- a/packages/graphql-language-service/README.md +++ b/packages/graphql-language-service/README.md @@ -20,7 +20,7 @@ The goal is to provide methods for creating [Language Server Protocol](https://l ## Parser -A standalone online, immutable, dependeancy-free parser for [GraphQL](http://graphql.org/), used by the LSP interface methods +A standalone online, immutable, dependency-free parser for [GraphQL](http://graphql.org/), used by the LSP interface methods ## Utils diff --git a/packages/monaco-graphql/README.md b/packages/monaco-graphql/README.md index fcb7ac1508a..b94862d75ff 100644 --- a/packages/monaco-graphql/README.md +++ b/packages/monaco-graphql/README.md @@ -6,7 +6,7 @@ GraphQL language plugin for the Monaco Editor. You can use it to build vscode/co - [webpack example](https://github.com/graphql/graphiql/tree/main/examples/monaco-graphql-webpack/) using plain javascript, shows how to change schemas - [vite + react example](https://stackblitz.com/edit/monaco-graphql-react-vite?file=src%2FApp.tsx&terminal=dev) - minimal example with variables (C)JSON support using react -- [live demo](https://monaco-graphql.netlify.com) of the monaco webpack example (prompts for github access token!) +- [live demo](https://monaco-graphql.netlify.com) of the monaco webpack example (prompts for GitHub access token!) > **NOTE:** This is in pre-release state as we build towards GraphiQL 2.0.x. [`codemirror-graphql`](https://github.com/graphql/graphiql/tree/main/packages/codemirror-graphql) has more features (such as JSON variables validation) and is more stable. @@ -127,7 +127,7 @@ This will cover the basics, making an HTTP POST with the default `introspectionQ ### Variables JSON Support! -In `monaco-graphql@0.5.0` we introduced a method `getVariablesJSONSchema` that allows you to retrive a `JSONSchema` description for the declared variables for any given set of operations +In `monaco-graphql@0.5.0` we introduced a method `getVariablesJSONSchema` that allows you to retrieve a `JSONSchema` description for the declared variables for any given set of operations ## Full Sync Demo with Variables JSON @@ -148,16 +148,16 @@ window.MonacoEnvironment = { }; // the language service will be instantiated once the schema is available - const MonacoGraphQLAPI = initializeMode({ - schemas: [{ - // anything that monaco.URI.from() is compatible with - uri: 'https://myschema.com', - // match the monaco file uris for this schema. - // accepts specific filenames and anything `picomatch` supports. - fileMatch: ["**/*.graphql"], - schema: myGraphqlSchema as GraphQLSchema - }], - }) +const MonacoGraphQLAPI = initializeMode({ + schemas: [{ + // anything that monaco.URI.from() is compatible with + uri: 'https://myschema.com', + // match the monaco file uris for this schema. + // accepts specific filenames and anything `picomatch` supports. + fileMatch: ["**/*.graphql"], + schema: myGraphqlSchema as GraphQLSchema + }], +}) const operationModel = monaco.editor.createModel( @@ -192,26 +192,25 @@ const variablesEditor = monaco.editor.create( }, ); - // high-level method for configuring json variables validation - MonacoGraphQLAPI.setDiagnosticSettings({ - validateVariablesJson: { - // Urls, uris, anything that monaco.URI.from() is compatible with. - // Match operation model to variables editor, - // and the language service will automatically listen for changes, - // and compute the json schema using the GraphQLWorker. - // This is in the main process is applied to the global monaco json settings - // for validation, completion and more using monaco-json's built-in JSON Schema support. - [operationModel.uri.toString()]: [variablesModel.uri.toString()] - }, - jsonDiagnosticSettings: { - allowComments: true, // allow json, parse with a jsonc parser to make requests - } - }) - // TODO: document manual alternative approach -})(); +// high-level method for configuring json variables validation +MonacoGraphQLAPI.setDiagnosticSettings({ + validateVariablesJson: { + // Urls, uris, anything that monaco.URI.from() is compatible with. + // Match operation model to variables editor, + // and the language service will automatically listen for changes, + // and compute the json schema using the GraphQLWorker. + // This is in the main process is applied to the global monaco json settings + // for validation, completion and more using monaco-json's built-in JSON Schema support. + [operationModel.uri.toString()]: [variablesModel.uri.toString()] + }, + jsonDiagnosticSettings: { + allowComments: true, // allow json, parse with a jsonc parser to make requests + } +}) +// TODO: document manual alternative approach ``` -You can also experiment with the built-in I think `jsonc`? (MSFT json5-ish syntax, for `tsconfig.json` etc) and the 3rd party `monaco-yaml` language modes for completion of other types of variable input. you can also experiment with editor methods to parse detected input into different formats, etc (`yaml` pastes as `json`, etc) +You can also experiment with the built-in I think `jsonc`? (MSFT json5-ish syntax, for `tsconfig.json` etc.) and the 3rd party `monaco-yaml` language modes for completion of other types of variable input. you can also experiment with editor methods to parse detected input into different formats, etc (`yaml` pastes as `json`, etc.) You could of course prefer to generate a `jsonschema` form for variables input using a framework of your choice, instead of an editor. Enjoy! @@ -248,7 +247,7 @@ const api = intializeMode(config); same as the above, except it overwrites the entire schema config. you can provide multiple, and use `fileMatch` to map to various uri "directory" globs or specific files. -`uri` can be a url or file path, anything parsable +`uri` can be an url or file path, anything parsable ```ts // you can load it lazily @@ -278,7 +277,7 @@ const api = intializeMode({ schemas }); // add another schema. this will cause language workers and features to reset api.setSchemaConfig([ - ..schemas, + ...schemas, { introspectionJSON: myIntrospectionJSON, fileMatch: ['specific/monaco/uri.graphql'], @@ -374,11 +373,11 @@ the plain javascript [webpack example](https://github.com/graphql/graphiql/tree/ ## Custom Webworker (for passing non-static config to worker) -If you want to pass a custom parser and/or or validation rules, it is supported, however the setup is a bit more complicated. +If you want to pass a custom parser and/or validation rules, it is supported, however the setup is a bit more complicated. You can add any `LanguageServiceConfig` ([typedoc](https://graphiql-test.netlify.app/typedoc/modules/graphql_language_service.html#graphqllanguageconfig-1)) configuration options you like here to `languageConfig` as below. -This is because we can't pass non-static configuration to the existing worker programatically, so you must import these and build the worker custom with those functions. Part of the (worthwile) cost of crossing runtimes! +This is because we can't pass non-static configuration to the existing worker programmatically, so you must import these and build the worker custom with those functions. Part of the (worthwhile) cost of crossing runtimes! you'll want to create your own `mygraphql.worker.ts` file, and add your custom config such as `schemaLoader` to `createData`: @@ -432,9 +431,9 @@ or, if you have webpack configured for it: window.MonacoEnvironment = { getWorkerUrl(_workerId: string, label: string) { if (label === 'graphql') { - return 'mygraphql.worker.js`; + return 'mygraphql.worker.js'; } - return 'editor.worker.js`; + return 'editor.worker.js'; }, }; ``` @@ -469,7 +468,7 @@ If you are familiar with Codemirror/Atom-era terminology and features, here's so - command palette and right click context menu are important - you can extend the standard completion/linting/etc provided. for example, `editor.setModelMarkers()` - [Monaco Editor API Docs](https://microsoft.github.io/monaco-editor/api/index.html) -- [Monaco Editor Samples](https://github.com/Microsoft/monaco-editor-samples) repository is great for tips on implementing with different bundlers, runtimes, etc +- [Monaco Editor Samples](https://github.com/Microsoft/monaco-editor-samples) repository is great for tips on implementing with different bundlers, runtimes, etc. ## TODO