Skip to content

Commit

Permalink
New website, better docs (based on nextjs & @theguild/docs) (#7010)
Browse files Browse the repository at this point in the history
Co-authored-by: Dotan Simha <[email protected]>
  • Loading branch information
Dimitri POSTOLOV and dotansimha committed Nov 24, 2021
1 parent bde3860 commit 1a4493a
Show file tree
Hide file tree
Showing 242 changed files with 12,047 additions and 11,771 deletions.
109 changes: 7 additions & 102 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,9 @@
[![CodeGen](https://user-images.githubusercontent.com/25294569/63773131-35f6aa00-c8e3-11e9-8191-fc0ac6f959e4.gif)](https://graphql-code-generator.com)
[![CodeGen](./logo.svg)](https://graphql-code-generator.com)

[![npm version](https://badge.fury.io/js/%40graphql-codegen%2Fcli.svg)](https://badge.fury.io/js/%40graphql-codegen%2Fcli)
[![CircleCI](https://circleci.com/gh/dotansimha/graphql-code-generator/tree/master.svg?style=svg)](https://circleci.com/gh/dotansimha/graphql-code-generator/tree/master)
[![Discord Chat](https://img.shields.io/discord/625400653321076807)](https://discord.gg/xud7bH9)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![renovate-app badge][renovate-badge]][renovate-app]

[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/

[graphql-code-generator.com](https://graphql-code-generator.com)

[GraphQL Codegen 1.0 is here!](https://graphql-code-generator.com/docs/migration/from-0-18)

GraphQL Code Generator is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can utilize GraphQL Code Generator to generate output from your GraphQL Schema and GraphQL Documents (query/mutation/subscription/fragment).

By analyzing the schema and documents and parsing it, GraphQL Code Generator can output code at a wide variety of formats, based on pre-defined templates or based on custom user-defined ones. Regardless of the language that you're using, GraphQL Code Generator got you covered.
Expand All @@ -21,10 +12,12 @@ GraphQL Code Generator lets you choose the output that you need, based on _plugi

You can try this tool live on your browser and see some useful examples. Check out [GraphQL Code Generator Live Examples](https://graphql-code-generator.com/#live-demo).

We currently support and maintain [these plugins](https://graphql-code-generator.com/docs/plugins/index) (TypeScript, Flow, React, Angular, MongoDB, Stencil, Reason, and some more), and there is an active community that writes and maintains custom plugins.
We currently support and maintain [these plugins](https://graphql-code-generator.com/plugins) (TypeScript, Flow, React, Angular, MongoDB, Stencil, Reason, and some more), and there is an active community that writes and maintains custom plugins.

### Quick Start

> You can find the complete instructions in [GraphQL-Code-Generator website](https://graphql-code-generator.com/docs/getting-started/installation).
Start by installing the basic deps of GraphQL Codegen;

yarn add graphql
Expand All @@ -36,101 +29,13 @@ GraphQL Code Generator lets you setup everything by simply running the following

Question by question, it will guide you through the whole process of setting up a schema, selecting plugins, picking a destination of a generated file, and a lot more.

If you don't want to use the wizard, install it by yourself and create a basic `codegen.yml` configuration file, point to your schema, and pick the plugins you wish to use.

Install CLI using `yarn`:

yarn add -D @graphql-codegen/cli

And create a config like below:

```yml
schema: http://localhost:3000/graphql
generates:
./src/types.d.ts:
plugins:
- typescript
```
Then, run the code-generator using `graphql-codegen` command:

yarn graphql-codegen

The command above may fetch (for example) the following GraphQL schema:

```graphql
type Author {
id: Int!
firstName: String!
lastName: String!
posts(findTitle: String): [Post]
}
type Post {
id: Int!
title: String!
author: Author!
}
type Query {
posts: [Post]
}
schema {
query: Query
}
```

And generate the following TypeScript typings:

```ts
export type Maybe<T> = T | null;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
ID: string,
String: string,
Boolean: boolean,
Int: number,
Float: number,
};
export type Author = {
__typename?: 'Author',
id: Scalars['Int'],
firstName: Scalars['String'],
lastName: Scalars['String'],
posts?: Maybe<Array<Maybe<Post>>>,
};
export type AuthorPostsArgs = {
findTitle?: Maybe<Scalars['String']>
};
export type Post = {
__typename?: 'Post',
id: Scalars['Int'],
title: Scalars['String'],
author: Author,
};
export type Query = {
__typename?: 'Query',
posts?: Maybe<Array<Maybe<Post>>>,
};
```
If you wish to [manually setup codegen, follow these instructions]((https://graphql-code-generator.com/docs/getting-started/installation)).

### Links

Besides our [docs page](https://graphql-code-generator.com/docs/getting-started/index), feel free to go through our published Medium articles to get a better grasp of what GraphQL Code Generator is all about:

- [All available plugins](https://graphql-code-generator.com/docs/plugins/index)

- [**GraphQL Code-Generator** - The True GraphQL-First platform](https://the-guild.dev/blog/graphql-code-generator)

- [**GraphQL Code-Generator v0.9** - What's new?](https://the-guild.dev/blog/graphql-code-generator-090)
Besides our [docs page](https://graphql-code-generator.com/docs/getting-started), feel free to go through our published Medium articles to get a better grasp of what GraphQL Code Generator is all about:

- [**GraphQL Code Generator v0.11** - Generate React and Angular Apollo Components, Resolver signatures and much more!](https://the-guild.dev/blog/graphql-code-generator-011)
- [All available plugins & presets](https://graphql-code-generator.com/plugins)

### Contributing

Expand Down
1 change: 0 additions & 1 deletion bob.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ module.exports = {
ignore: [
'@graphql-codegen/website',
'@graphql-codegen/live-demo',
'@graphql-codegen/config-schema',
'example-programmatic-typescript',
],
};
12 changes: 12 additions & 0 deletions dev-test/alt-codegen.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
overwrite: true
schema: 'test-schema/schema.graphql'
documents:
- 'src/**/*.graphql'

generates:
test-schema/schema.ts:
- typescript:
declarationKind: interface
- typescript-operations:
declarationKind: interface
defaultScalarType: unknown
Binary file removed logo.png
Binary file not shown.
9 changes: 9 additions & 0 deletions logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,9 @@
"packages/plugins/other/*",
"packages/presets/*",
"website",
"website/live-demo",
"examples/*"
],
"nohoist": [
"@graphql-codegen/website/@docusaurus/*",
"**/@babel-*",
"**/@babel-*/**"
]
Expand Down
8 changes: 4 additions & 4 deletions packages/plugins/flow/flow/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ export interface FlowPluginConfig extends RawTypesConfig {
* ```yml
* generates:
* path/to/file.ts:
* plugins:
* - flow
* config:
* useFlowReadOnlyTypes: true
* plugins:
* - flow
* config:
* useFlowReadOnlyTypes: true
* ```
*/
useFlowReadOnlyTypes?: boolean;
Expand Down
34 changes: 17 additions & 17 deletions packages/plugins/flow/operations/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { RawDocumentsConfig } from '@graphql-codegen/visitor-plugin-common';
*
* It generates types for your GraphQL documents: Query, Mutation, Subscription and Fragment.
*
* This plugin requires you to use `@graphql-codegen/flow` as well, because it depends on it's types.
* This plugin requires you to use `@graphql-codegen/flow` as well, because it depends on its types.
*/
export interface FlowDocumentsPluginConfig extends RawDocumentsConfig {
/**
Expand All @@ -15,11 +15,11 @@ export interface FlowDocumentsPluginConfig extends RawDocumentsConfig {
* @exampleMarkdown
* ```yml
* generates:
* path/to/file.ts:
* plugins:
* - flow
* config:
* useFlowExactObjects: false
* path/to/file.ts:
* plugins:
* - flow
* config:
* useFlowExactObjects: false
* ```
*/
useFlowExactObjects?: boolean;
Expand All @@ -30,11 +30,11 @@ export interface FlowDocumentsPluginConfig extends RawDocumentsConfig {
* @exampleMarkdown
* ```yml
* generates:
* path/to/file.ts:
* plugins:
* - flow
* config:
* useFlowReadOnlyTypes: true
* path/to/file.ts:
* plugins:
* - flow
* config:
* useFlowReadOnlyTypes: true
* ```
*/
useFlowReadOnlyTypes?: boolean;
Expand All @@ -45,12 +45,12 @@ export interface FlowDocumentsPluginConfig extends RawDocumentsConfig {
* @exampleMarkdown
* ```yml
* generates:
* path/to/file.ts:
* plugins:
* - typescript
* - typescript-operations
* config:
* flattenGeneratedTypes: true
* path/to/file.ts:
* plugins:
* - typescript
* - typescript-operations
* config:
* flattenGeneratedTypes: true
* ```
*/
flattenGeneratedTypes?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion packages/plugins/flow/resolvers/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { FlowResolversVisitor } from './visitor';
*
* It generates types for your entire schema: types, input types, enum, interface, scalar and union.
*
* This plugin requires you to use `@graphql-codegen/flow` as well, because it depends on it's types.
* This plugin requires you to use `@graphql-codegen/flow` as well, because it depends on its types.
*/
export interface RawFlowResolversConfig extends RawResolversConfig {}

Expand Down
36 changes: 18 additions & 18 deletions packages/plugins/java/apollo-android/src/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ export interface JavaApolloAndroidPluginConfig extends RawConfig {
* @exampleMarkdown
* ```yml
* generates:
* ./app/src/main/java/:
* preset: java-apollo-android
* config:
* package: "com.my.package.generated.graphql"
* plugins:
* - java-apollo-android
* ./app/src/main/java/:
* preset: java-apollo-android
* config:
* package: 'com.my.package.generated.graphql'
* plugins:
* - java-apollo-android
* ```
*/
package?: string;
Expand All @@ -32,12 +32,12 @@ export interface JavaApolloAndroidPluginConfig extends RawConfig {
* @exampleMarkdown
* ```yml
* generates:
* ./app/src/main/java/:
* preset: java-apollo-android
* config:
* typePackage: "com.my.package.generated.graphql"
* plugins:
* - java-apollo-android
* ./app/src/main/java/:
* preset: java-apollo-android
* config:
* typePackage: 'com.my.package.generated.graphql'
* plugins:
* - java-apollo-android
* ```
*/
typePackage?: string;
Expand All @@ -47,12 +47,12 @@ export interface JavaApolloAndroidPluginConfig extends RawConfig {
* @exampleMarkdown
* ```yml
* generates:
* ./app/src/main/java/:
* preset: java-apollo-android
* config:
* fragmentPackage: "com.my.package.generated.graphql"
* plugins:
* - java-apollo-android
* ./app/src/main/java/:
* preset: java-apollo-android
* config:
* fragmentPackage: 'com.my.package.generated.graphql'
* plugins:
* - java-apollo-android
* ```
*/
fragmentPackage?: string;
Expand Down
32 changes: 16 additions & 16 deletions packages/plugins/other/fragment-matcher/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,17 @@ interface PossibleTypesResultData {
*/
export interface FragmentMatcherConfig {
/**
* @description Compatible only with JSON extension, allow you to choose the export type, either `module.exports` or `export default`. Allowed values are: `commonjs`, `es2015`.
* @description Compatible only with JSON extension, allow you to choose the export type, either `module.exports` or `export default`. Allowed values are: `commonjs`, `es2015`.
* @default es2015
*
* @exampleMarkdown
* ```yml
* generates:
* path/to/file.json:
* plugins:
* - fragment-matcher
* config:
* module: commonjs
* path/to/file.json:
* plugins:
* - fragment-matcher
* config:
* module: commonjs
* ```
*/
module?: 'commonjs' | 'es2015';
Expand All @@ -59,11 +59,11 @@ export interface FragmentMatcherConfig {
* @exampleMarkdown
* ```yml
* generates:
* path/to/file.ts:
* plugins:
* - fragment-matcher
* config:
* apolloClientVersion: 3
* path/to/file.ts:
* plugins:
* - fragment-matcher
* config:
* apolloClientVersion: 3
* ```
*/
apolloClientVersion?: 2 | 3;
Expand All @@ -74,11 +74,11 @@ export interface FragmentMatcherConfig {
* @exampleMarkdown
* ```yml
* generates:
* path/to/file.ts:
* plugins:
* - fragment-matcher
* config:
* useExplicitTyping: true
* path/to/file.ts:
* plugins:
* - fragment-matcher
* config:
* useExplicitTyping: true
* ```
*/
useExplicitTyping?: boolean;
Expand Down
10 changes: 5 additions & 5 deletions packages/plugins/other/introspection/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ export interface IntrospectionPluginConfig {
* @exampleMarkdown
* ```yml
* generates:
* introspection.json:
* plugins:
* - introspection
* config:
* minify: true
* introspection.json:
* plugins:
* - introspection
* config:
* minify: true
* ```
*/
minify?: boolean;
Expand Down
Loading

0 comments on commit 1a4493a

Please sign in to comment.