Skip to content

Commit

Permalink
[website] rename schema and documents to schema and operations (#2784)
Browse files Browse the repository at this point in the history
  • Loading branch information
dimaMachina authored Nov 29, 2024
1 parent 045121f commit 8e8d7cf
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 98 deletions.
2 changes: 1 addition & 1 deletion website/app/_meta.global.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default {
},
graphql: '',
js: '',
'schema-and-documents': '',
'schema-and-operations': '',
'multiple-projects': '',
programmatic: '',
_2: {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
---
sidebarTitle: Schema and Documents
sidebarTitle: Schema and Operations
icon: HalfIcon
---

# Usage to lint both schema/documents
# Usage to lint both schema/operations

<ESLintConfigs gitFolder="monorepo" graphqlConfigFile="graphql.config.js" />
70 changes: 1 addition & 69 deletions website/content/docs/usage/vue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,72 +5,4 @@ icon: VueIcon

# Usage with `.vue` files

<OfficialExampleCallout gitFolder="vue-code-file" />

`graphql-eslint` can lint GraphQL documents inside Vue Single-File Components (`.vue` files). It
does this in two steps: (1) extract the GraphQL documents from the Vue (or `.js`/`.ts`) file, and
(2) lint the extracted GraphQL documents.

If you don't embed GraphQL documents in your Vue files, you can skip this page.

> [!WARNING]
>
> Due to
> [a limitation in `graphql-tag-pluck`](https://github.com/dimaMachina/graphql-eslint/issues/2103),
> lint violations will show up at the top of the Vue document, on the first character, not inline.
## Configuration

Add the following configuration to your `eslint.config.js` file to setup `@graphql-eslint` plugin.
The intermediate graphql files always have the `.graphql` extension. Make sure the second block
matches those files, even if you use another extension for your project's GraphQL (e.g. `.gql`).

> [!WARNING]
>
> Make sure the first section, which extracts GraphQL from Vue files, comes **before** any other Vue
> rules. Otherwise, eslint may incorrectly rewrite all error messages to say only "clear".
```js filename="eslint.config.js"
import graphqlPlugin from '@graphql-eslint/eslint-plugin'

export default [
{
// NOTE: Order matters! This has to happen FIRST, before any block that
// includes the Vue parser (including e.g. recommended Vue ESLint rules).
// It also has to be before the .graphql block, below
//
// Extract GraphQL from files for linting -- this creates .graphql files
// that are then linted below
//
// graphql-eslint scans all files (using the processor listed) and outputs
// an intermediate file with the extracted GraphQL. That intermediate file
// is then linted, generating the errors we see. The intermediate file has
// a fixed .graphql extension, so you need to include that extension below
// or these files won't be linted.
files: ['**/*.js', '**/*.ts', '**/*.vue'],
processor: graphqlPlugin.processor
// NOTE: While you CAN put rules here to affect JS/TS/Vue files, those
// rules won't affect GraphQL. To modify rules that effect GraphQL inside
// these files, add those to the block for .graphql files, below.
},
// ...other config
{
// Lint all GraphQL files, including the intermediate ones above. If you
// want to tune the rules that appear in your files, even Vue/JS/TS files,
// put those rule changes HERE
files: ['**/*.graphql'], // Add .gql extension if you use that
languageOptions: {
parser: graphqlPlugin.parser
},

// Any rule overrides for GraphQL go HERE. For example, to enable
// recommended operations rules
plugins: { '@graphql-eslint': graphqlPlugin },
rules: {
...graphqlESLint.configs['flat/operations-recommended'].rules
// Can also override the recommended rules here, e.g.:
// "@graphql-eslint/naming-convention": ["off"],
}
}
]
```
<ESLintConfigs gitFolder="vue-code-file" />
39 changes: 13 additions & 26 deletions website/mdx-components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,13 @@ import {
} from '@theguild/components/server';

const docsComponents = getDocsMDXComponents({
async OfficialExampleCallout({ gitFolder }) {
async ESLintConfigs({ gitFolder, graphqlConfigFile = '' }) {
const user = 'dimaMachina';
const repo = 'graphql-eslint';
const branch = 'master';
const docsPath = `examples/${gitFolder}/`;
return (
<MDXRemote
compiledSource={await compileMdx(`
> [!NOTE]
>
> Check out
> [the official examples](https://github.com/${user}/${repo}/tree/${branch}/${docsPath})
> for
> [ESLint Flat Config](https://github.com/${user}/${repo}/blob/${branch}/${docsPath}eslint.config.js)
> or
> [ESLint Legacy Config](https://github.com/${user}/${repo}/blob/${branch}/${docsPath}/.eslintrc.cjs)
> .`)}
/>
);
},
// WIP() {
// return (
// <Callout type="warning" emoji="🚧">
// This page is under construction. Help us improve the content by submitting a PR.
// </Callout>
// );
// },
async ESLintConfigs({ gitFolder, graphqlConfigFile = '' }) {
const docsPath = path.join(process.cwd(), '..', 'examples', gitFolder);
const { ext } = path.parse(graphqlConfigFile);

const graphqlConfig =
graphqlConfigFile &&
`
Expand All @@ -47,10 +24,20 @@ const docsComponents = getDocsMDXComponents({
${(await fs.readFile(`${docsPath}/${graphqlConfigFile}`, 'utf8')).trim()}
\`\`\`
`;

return (
<MDXRemote
compiledSource={await compileMdx(`
<OfficialExampleCallout gitFolder="${gitFolder}" />
> [!NOTE]
>
> Check out
> [the official examples](https://github.com/${user}/${repo}/tree/${branch}/examples/${gitFolder})
> for
> [ESLint Flat Config](https://github.com/${user}/${repo}/blob/${branch}/examples/${gitFolder}/eslint.config.js)
> or
> [ESLint Legacy Config](https://github.com/${user}/${repo}/blob/${branch}/examples/${gitFolder}/.eslintrc.cjs)
> .
${graphqlConfig}
## ESLint Flat Config
\`\`\`js filename="eslint.config.js"
Expand Down

0 comments on commit 8e8d7cf

Please sign in to comment.