Skip to content

Commit

Permalink
Merge branch 'master' into typed-document-string
Browse files Browse the repository at this point in the history
  • Loading branch information
beerose committed Mar 15, 2023
2 parents e3120b3 + a4697a3 commit 8b5ad73
Show file tree
Hide file tree
Showing 119 changed files with 238 additions and 7 deletions.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
6 changes: 6 additions & 0 deletions examples/typescript-graphql-request/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: process.versions.node.split('.')[0] } }],
'@babel/preset-typescript',
],
};
4 changes: 4 additions & 0 deletions examples/typescript-graphql-request/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
transform: { '^.+\\.ts': 'babel-jest' },
testPathIgnorePatterns: ['/node_modules/', '/dist/'],
};
2 changes: 1 addition & 1 deletion examples/typescript-graphql-request/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"codegen": "graphql-codegen --config codegen.ts",
"build": "tsc",
"dev": "ts-node src/main.ts",
"test:end2end": "exit 0"
"test:end2end": "yarn jest"
},
"type": "commonjs",
"bob": false
Expand Down
13 changes: 13 additions & 0 deletions examples/typescript-graphql-request/src/main.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { getPeople } from './main';

describe('TypeScript GraphQL Request tests', () => {
it('works without variables', async () => {
const result = await getPeople();
expect(result?.map(o => o?.node?.name)).toContain('Luke Skywalker');
});

it('returns first 3 entries', async () => {
const result = await getPeople(3);
expect(result).toHaveLength(3);
});
});
18 changes: 12 additions & 6 deletions examples/typescript-graphql-request/src/main.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable no-console */
import { GraphQLClient } from 'graphql-request';
import { graphql } from './gql';
import { AllPeopleQueryQuery } from './gql/graphql';

const AllPeopleQueryDocument = graphql(/* GraphQL */ `
query AllPeopleQuery {
Expand Down Expand Up @@ -36,10 +37,15 @@ const apiUrl = 'https://swapi-graphql.netlify.app/.netlify/functions/index';

const client = new GraphQLClient(apiUrl);

client.request(AllPeopleQueryDocument.toString()).then(res => {
console.log(res?.allPeople?.edges);
});
export const getPeople = async (first?: number) => {
let res: AllPeopleQueryQuery;
if (first) {
res = await client.request(AllPeopleWithVariablesQueryDocument.toString(), { first });
} else {
res = await client.request(AllPeopleQueryDocument.toString());
}
return res?.allPeople?.edges;
};

client.request(AllPeopleWithVariablesQueryDocument.toString(), { first: 10 }).then(res => {
console.log(res?.allPeople?.edges);
});
getPeople().then(res => console.log(res));
getPeople(10).then(res => console.log(res));
4 changes: 4 additions & 0 deletions website/src/pages/docs/advanced/document-transform.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Document transform is a feature that allows you to modify documents before they are used by plugins.
---

import { Callout } from '@theguild/components'

# Document Transform
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
---
description: Generate types near your GraphQL operations. Colocate your generated files with your original GraphQL operations.
---
import { PackageCmd, Callout } from '@theguild/components'

# Generated files colocation
Expand Down
3 changes: 3 additions & 0 deletions website/src/pages/docs/advanced/how-does-it-work.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
---
description: GraphQL Introspection allows fetching the types defined in the target GraphQL API. GraphQL AST allows to navigate through both client-side operations and remote schema types.
---
# How does GraphQL Code Generator Work?

In order to generate code and types, GraphQL Code Generator relies on 2 main core concepts of GraphQL:
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/advanced/profiler.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator CLI provides a flag that enables the profiler mode. This allows you to identify performance bottlenecks in your codegen configuration.
---

import { PackageCmd } from '@theguild/components'

# GraphQL Code Generator Profiler
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/advanced/programmatic-usage.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator also provides a complete programmatic API. The programmatic API can be used if you need to customize the execution flow or write a tool that uses the codegen.
---

import { Callout } from '@theguild/components'

# Programmatic Usage
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/config-reference/codegen-config.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to configure GraphQL Code Generator to generate code from your GraphQL schema and documents.
---

import { PackageCmd, Callout } from '@theguild/components'

# `codegen.ts` file
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/config-reference/config-field.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to configure GraphQL Code Generator to fit your needs. The `config` field is used to pass configuration to Plugins.
---

import { Callout } from '@theguild/components'

# `config` field
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/config-reference/documents-field.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to specify the documents field in your GraphQL Code Generator config file.
---

import { Callout } from '@theguild/components'

# `documents` field
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/config-reference/lifecycle-hooks.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to use the GraphQL Code Generator CLI to generate code from your GraphQL schema and operations.
---

import { Callout } from '@theguild/components'

# Lifecycle Hooks
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to use GraphQL Code Generator with multiple projects in the same config file.
---

# Multi Project

In some cases, it's useful to have multiple projects in the same config file.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/config-reference/naming-convention.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: 'GraphQL Code Generator is a tool for generating code from GraphQL schema and operations.'
---

# Naming Convention

GraphQL Code Generation provides a `namingConvention` option to control the naming convention of the different code elements generated (types, enum values, …).
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/config-reference/require-field.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to use the require field to load external files without transpiling them.
---

import { Callout } from '@theguild/components'

# `require` field
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/config-reference/schema-field.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: How to specify your GraphQL Schema in GraphQL Code Generator. Learn how to load your schema from a remote server, local file, or multiple files.
---

import { Callout } from '@theguild/components'

# `schema` field
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/custom-codegen/contributing.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Create a new GraphQL Code Generator plugin for your favorite language or platform.
---

import { Callout } from '@theguild/components'

# Contributing
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/custom-codegen/extend-schema.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to create a custom plugin for GraphQL Code Generator. How to extend the GraphQL Schema?
---

# How to extend the GraphQL Schema?

Each plugin can also specify `addToSchema` field, and to extend the `GraphQLSchema` with more types:
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/custom-codegen/index.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: The general purpose of GraphQL Code Generator is to parse GraphQL syntax, transform it into an AST and then output it into desired formats which can vary.
---

# What are Plugins?

The general purpose of GraphQL Code Generator is to parse GraphQL syntax, transform it into an AST and then output it into desired formats which can vary.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/custom-codegen/plugin-structure.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to write your own GraphQL Code Generator Plugin. You can use it to generate custom output, or to extend the existing plugins.
---

import { Callout } from '@theguild/components'

# Write your first Plugin
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/custom-codegen/using-visitor.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to write your own plugins for GraphQL Code Generator. Most of the codegen's plugins are written with a design-pattern called Visitor.
---

# Visitor Pattern

Most of the codegen's plugins are written with a design-pattern called [Visitor](https://en.wikipedia.org/wiki/Visitor_pattern).
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to create your own plugins for GraphQL Code Generator. You can use plugins to generate code, documents, or even to modify the schema.
---

import { Callout } from '@theguild/components'

# Validate Plugin Configuration
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: How to integrate GraphQL Code Generator into your development workflow. Learn how to run it in watch mode, or as part of your CI flow.
---

# Development workflow

GraphQL Code Generator should be integrated as part of your development workflow.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: ESM TypeScript Usage
description: How to use ESM with TypeScript. ESM is an important step in the JavaScript ecosystem because it allows static analysis of the dependency tree.
---

# ESM TypeScript Usage
Expand Down
1 change: 1 addition & 0 deletions website/src/pages/docs/getting-started/index.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: Introduction
description: GraphQL Code Generator is a plugin-based tool that helps you get the best out of your GraphQL stack. From back-end to front-end, GraphQL Code Generator automates the generation of typed Queries, Mutations and, Subscriptions for React, Vue, Angular, Next.js, Svelte, whether you are using Apollo Client, URQL or, React Query.
---

import { Tabs, Tab, Callout, PackageCmd } from '@theguild/components'
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/getting-started/installation.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: 'GraphQL Code Generator is a tool for generating code from GraphQL schema and operations. It can generate code for various platforms, such as React, Angular, Node, and more.'
---

import { Callout, PackageCmd } from '@theguild/components'

# Installation
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/guides/angular.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator provides the @graphql-codegen/typescript-apollo-angular plugin that generates full-typed Apollo GraphQL services.
---

import { PackageCmd, Callout } from '@theguild/components'

# Guide: Angular
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/guides/api-testing.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator can generate typed results for your GraphQL operations. This tutorial uses GraphQL Yoga, but the practices are applicable to testing any GraphQL server.
---

import { Callout, PackageCmd } from '@theguild/components'

# Guide: API Testing
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/guides/flutter-freezed.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Boost 🚀 your development of Dart/Flutter apps using a GraphQL API by generating models directly from your GraphQL Schema.
---

import { PackageCmd, Callout } from '@theguild/components'

# Guide: Dart/Flutter
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/guides/further-reading.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator is a tool for generating code from your GraphQL schema and operations. It's a great way to get type-safety and auto-completion in your code.
---

# Further Reading

Our guides helps you getting started with the most popular frameworks, GraphQL clients and servers.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/guides/graphql-modules.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator's `@graphql-codegen/graphql-modules-preset` plugin helps to generate resolvers type for each module of a GraphQL Modules GraphQL API.
---

import { PackageCmd } from '@theguild/components'

# Guide: GraphQL Modules
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator's server preset, `@eddeee888/gcg-typescript-resolver-files`, helps GraphQL APIs work at any scale by enforcing best practices such as type-safety and schema module conventions.
---

import { PackageCmd, Callout, Tabs, Tab } from '@theguild/components'

# Guide: GraphQL Yoga / Apollo Server with Server Preset
Expand Down
3 changes: 3 additions & 0 deletions website/src/pages/docs/guides/graphql-server-apollo-yoga.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
---
description: GraphQL Code Generator's `@graphql-codegen/typescript-resolvers` plugin generates TypeScript types for your GraphQL API's resolvers.
---
import { PackageCmd, Tabs, Tab, Callout } from '@theguild/components'

# Guide: GraphQL Yoga / Apollo Server
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/guides/react-vue.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator is a tool that generates code from your GraphQL schema and operations. It can generate TypeScript, Flow, Swift, Kotlin, and more.
---

import { Tabs, Tab, Callout, PackageCmd } from '@theguild/components'

# Guide: React and Vue
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/guides/svelte.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Generate typed code for SvelteKit and Apollo. GraphQL Code Generator and the community provide typed code generation for Apollo, SvelteKit _native_, and other clients.
---

import { Callout, PackageCmd } from '@theguild/components'

# Guide: Svelte / Kit
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/integrations/apollo-local-state.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Apollo Local State. Suppose you are using apollo-client >2.5 or older, with apollo-link-state to manage your app state with GraphQL. In that case, you're probably using a client-side only GraphQL schema and client-side directives such as `@client`.
---

# Apollo Local State

Suppose you are using [apollo-client](https://apollographql.com/docs/react/v2/data/local-state) >2.5 (or older, with [apollo-link-state](https://apollographql.com/docs/link/links/state.html)) to manage your app state with GraphQL. In that case, you're probably using a client-side only GraphQL schema and client-side directives such as `@client`.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/integrations/create-react-app.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Codegen for React Apollo with TypeScript. Generates React Hooks and TypeScript types.
---

# Create-React-App

Since v2 of [Create-React-App](https://github.com/facebook/create-react-app), you can use TypeScript without the need to eject from the basic scripts packages.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/integrations/federation.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Generate TypeScript resolvers signatures for your GraphQL schema. Supports Apollo Federation.
---

# Apollo Federation

The `typescript-resolvers` plugin also supports [Apollo Federation](https://apollographql.com/docs/apollo-server/federation/introduction).
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/integrations/gatsby.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: GraphQL Code Generator is a tool for generating code based on your GraphQL schema and operations.
---

# Gatsby

If you build apps using [Gatsby](https://gatsbyjs.com), you can use its built-in feature called [GraphQL Typegen](https://gatsbyjs.com/docs/how-to/local-development/graphql-typegen). Under the hood it uses the GraphQL Code Generator to generate TypeScript types, but you don't need to set anything up other than enabling an option.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/integrations/prettier.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Learn how to use Prettier and other linters with GraphQL Code Generator to apply your custom code style and formatting rules.
---

import { Callout } from '@theguild/components'

# Prettier & Linters
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/integrations/vscode.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Code generation for your GraphQL operations. Generate code from your GraphQL queries, mutations, subscriptions, fragments, and schema.
---

# VSCode

In VSCode, you can install a lightweight extension to get your codegen on every save effortlessly.
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/migration/from-0-13.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Migrating from 0.13 to 0.18. What has changed? How to migrate? What are the new features?
---

import { Callout } from '@theguild/components'

# Migration from 0.13 to 0.18
Expand Down
4 changes: 4 additions & 0 deletions website/src/pages/docs/migration/from-0-18.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
description: Migrating to 1.0.0. What has changed? How to migrate? What are the new features?
---

import { Callout, Tabs, Tab, PackageCmd } from '@theguild/components'

# Migration to 1.0.0
Expand Down
1 change: 1 addition & 0 deletions website/src/pages/plugins/c-sharp/c-sharp-operations.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: c-sharp-operations
description: C# operations plugin. Generates C# methods for the resolvers' signature. Works with GraphQL.
---

import { PluginApiDocs, PluginHeader } from '@/components/plugin'
Expand Down
1 change: 1 addition & 0 deletions website/src/pages/plugins/dart/flutter-freezed.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
title: flutter-freezed
description: Flutter plugin for generating Dart classes from GraphQL queries. It uses the freezed package.
---

import { PluginApiDocs, PluginHeader } from '@/components/plugin'
Expand Down
Loading

0 comments on commit 8b5ad73

Please sign in to comment.