diff --git a/_posts/2020-05-16-adding-typescript-types-github-graphql-api.md b/_posts/2020-05-16-adding-typescript-types-github-graphql-api.md index 0f769e4..827f55e 100644 --- a/_posts/2020-05-16-adding-typescript-types-github-graphql-api.md +++ b/_posts/2020-05-16-adding-typescript-types-github-graphql-api.md @@ -58,13 +58,14 @@ npx graphql-codegen init ``` ``` -? What type of application are you building? (Press to select, to toggle all, to invert - selection) - ❯◉ Backend - API or server - ◯ Application built with Angular - ◯ Application built with React - ◯ Application built with Stencil - ◯ Application built with other framework or vanilla JS +? What type of application are you building? (Use arrow keys) +❯ Backend - API or server + Application built with Angular + Application built with React + Application built with Stencil + Application built with Vue + Application using graphql-request + Application built with other framework or vanilla JS ``` Select the type of app you're building. For this tutorial, we'll demo a `Backend - API or server`. Highlight "Backend - @@ -119,7 +120,7 @@ This will create an entry in the `package.json` `scripts` object. I like to use enter. ``` -Config file generated at codegen.yml +Config file generated at codegen.ts $ npm install @@ -136,7 +137,7 @@ Great, we're all done with the wizard. Install all the plugins the wizard wrote npm install ``` -Our last setup step is to write the `src/generated/github-schema-loader.ts` file we referenced earlier. Create a file at +Now, write the `src/generated/github-schema-loader.ts` file we referenced earlier. Create a file at `src/generated/github-schema-loader.ts` and paste the following code: ```ts @@ -223,19 +224,33 @@ mutations in their own folders, so create a directory for each: mkdir -p src/mutations src/queries ``` -And reference those directories in your `codegen.yml` file: +And reference those directories in your `codegen.ts` file: -```yaml -documents: - - src/queries/*.graphql - - src/mutations/*.graphql +```ts +// codegen.ts +import type { CodegenConfig } from "@graphql-codegen/cli"; + +const config: CodegenConfig = { + overwrite: true, + schema: "src/generated/github-schema-loader.ts", + // Add this line + documents: ["src/mutations/*.graphql", "src/queries/*.graphql"], + generates: { + "src/generated/graphql.ts": { + plugins: ["typescript", "typescript-resolvers", "typescript-document-nodes"], + }, + }, + require: ["ts-node/register"], +}; + +export default config; ``` -For the next steps, you'll also need a Github Personal Access token with `repo` scope. If you don't already have one, -create one in your [settings](https://github.com/settings/tokens). For help doing this, check out this +For the next steps, you'll also need a Classic Github Personal Access token with `repo` scope. If you don't already have +one, create one in your [settings](https://github.com/settings/tokens). For help doing this, check out this [Github support page](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line). -### Install Apollo +### Create an Apollo Client For this demo, I'll use [Apollo](https://github.com/apollographql/apollo-client) as my GraphQL client. Install Apollo and its dependencies: @@ -271,7 +286,7 @@ export function githubClient(): ApolloClient { ``` Don't worry about understanding this code if it's unfamiliar. All it's doing is setting up a GraphQL client to use when -communicating with the Github GraphQL API. +communicating with the Github GraphQL API. You can use any other network client you like. ### GraphQL Codegen Typescript Operations @@ -283,16 +298,19 @@ to generate Typescript classes from our `.graphql` files. npm install --save-dev @graphql-codegen/typescript-operations ``` -and reference it in your `codegen.yml` file under the `plugins` list. +and reference it in your `codegen.ts` file under the `plugins` list. -```yaml -generates: - src/generated/graphql.ts: - plugins: - - "typescript" - - "typescript-resolvers" - - "typescript-document-nodes" - - "typescript-operations" # add this +```ts +generates: { + "src/generated/graphql.ts": { + plugins: [ + "typescript", + "typescript-resolvers", + "typescript-document-nodes", + "typescript-operations", // Add this line + ], + }, +}, ``` ### Writing A Query @@ -333,7 +351,7 @@ async function main() { console.info(`Your github username is ${username}`); } -main(); +main().catch((e) => console.error(e)); ``` By providing the `` type, Typescript now understands the object that will be returned from the query. We @@ -421,7 +439,7 @@ async function main() { await starRepo(benLimmerDotComRepoId); } -main(); +main().catch((e) => console.error(e)); ``` Note that we've added the `starRepo` method that calls our new mutation. By passing @@ -537,7 +555,7 @@ async function main() { await starRepo(benLimmerDotComRepoId); } -main(); +main().catch((e) => console.error(e)); ``` Note that we're now calling `getBenLimmerDotComRepoId()` instead of hard-coding the value. Typescript is also helping us