Skip to content
This repository has been archived by the owner on Apr 11, 2024. It is now read-only.

Commit

Permalink
Applying comments from review
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulomarg
paulomarg committed Nov 10, 2023
1 parent f0fe540 commit e5796da
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 37 deletions.
2 changes: 2 additions & 0 deletions .changeset/polite-donkeys-appear.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
131 changes: 99 additions & 32 deletions packages/api-codegen-preset/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,51 +28,121 @@ pnpm add -D @shopify/api-codegen-preset

## Configuration

This package provides 3 key exports:
This package provides 3 key exports, that make it increasingly easier to set up a project:

1. `shopifyApiProject`: one-stop-shop setup for an entire codegen project.
1. `shopifyApiTypes`: provides all the [`generates`](https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config#configuration-options) steps needed for a project.
1. `preset`: provides the low-level implementation that converts the schema into types. Include this in a `generates` step.
1. `shopifyApiTypes`: provides all the [`generates`](https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config#configuration-options) steps needed for a project.
1. `shopifyApiProject`: one-stop-shop setup for an entire codegen project.

### `shopifyApiProject`
### `preset`

This function creates a fully-functional project configuration.
Use this as [a Codegen preset](https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config#configuration-options) inside a `generates` step.
This gives you complete control over your configuration if you want to set up a fully custom scenario.

| Option | Type | Default | Description |
| ------- | --------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| apiType | `ApiType` | | The API to pull schemas from. |
| module | `string?` | Depends on `ApiType` | Change the module whose types will be overridden. Use this to override the types for any package, as long as it uses the same names. |

| Option | Type | Required | Default | Description |
| ---------- | ---------- | -------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| apiType | `ApiType` | Yes | | The API to pull schemas from. |
| apiVersion | `string` | | Latest | Pull schemas for a specific version. |
| outputDir | `string` | | `.` | Where to output the types files. |
| documents | `string[]` | | `./**/*.{ts,tsx}` | Glob pattern for files to parse. |
| module | `string` | | Depends on `ApiType` | Change the module whose types will be overridden. Use this to override the types for any package, as long as it uses the same names. |
#### Example `.graphqlrc.ts` file

```ts
import { ApiType, pluckConfig, preset } from "@shopify/api-codegen-preset";

export default {
// For syntax highlighting / auto-complete when writing operations
schema: "https://shopify.dev/admin-graphql-direct-proxy",
documents: ["*.{js,ts,jsx,tsx}"],
projects: {
default: {
schema: "https://shopify.dev/admin-graphql-direct-proxy",
documents: ["*.{js,ts,jsx,tsx}"],
extensions: {
codegen: {
schema: "https://shopify.dev/admin-graphql-direct-proxy",
documents: ["*.{js,ts,jsx,tsx}"],
// Enables support for `#graphql` tags, as well as `/* GraphQL */`
pluckConfig,
generates: {
"./types/admin.schema.json": {
plugins: ["introspection"],
config: { minify: true },
},
"./types/admin.types.d.ts": {
plugins: ["typescript"],
},
"./types/admin.generated.d.ts": {
preset,
presetConfig: {
apiType: ApiType.Admin,
},
},
},
},
},
},
},
};
```

### `shopifyApiTypes`

This function creates the appropriate `generates` steps for a project.
Use this function if you want to configure a custom project, or add your own `generates` steps.

| Option | Type | Required | Default | Description |
| ---------- | ---------- | -------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| apiType | `ApiType` | Yes | | The API to pull schemas from. |
| apiVersion | `string` | | Latest | Pull schemas for a specific version. |
| outputDir | `string` | | `.` | Where to output the types files. |
| documents | `string[]` | | `./**/*.{ts,tsx}` | Glob pattern for files to parse. |
| module | `string` | | Depends on `ApiType` | Change the module whose types will be overridden. Use this to override the types for any package, as long as it uses the same names. |
| Option | Type | Default | Description |
| ---------- | ----------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| apiType | `ApiType` | | The API to pull schemas from. |
| apiVersion | `string?` | Latest | Pull schemas for a specific version. |
| outputDir | `string?` | `.` | Where to output the types files. |
| documents | `string[]?` | `./**/*.{ts,tsx}` | Glob pattern for files to parse. |
| module | `string?` | Depends on `ApiType` | Change the module whose types will be overridden. Use this to override the types for any package, as long as it uses the same names. |

### `preset`
#### Example `.graphqlrc.ts` file

Use this as [a Codegen preset](https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config#configuration-options) inside a `generates` step.
This gives you complete control over your configuration if you want to set up a fully custom scenario.
```js
import {
ApiType,
pluckConfig,
shopifyApiTypes,
} from "@shopify/api-codegen-preset";

| Option | Type | Required | Default | Description |
| ------- | --------- | -------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| apiType | `ApiType` | Yes | | The API to pull schemas from. |
| module | `string` | | Depends on `ApiType` | Change the module whose types will be overridden. Use this to override the types for any package, as long as it uses the same names. |
export default {
// For syntax highlighting / auto-complete when writing operations
schema: "https://shopify.dev/admin-graphql-direct-proxy/2023-10",
documents: ["./app/**/*.{js,ts,jsx,tsx}"],
projects: {
// To produce variable / return types for Admin API operations
schema: "https://shopify.dev/admin-graphql-direct-proxy/2023-10",
documents: ["./app/**/*.{js,ts,jsx,tsx}"],
extensions: {
codegen: {
pluckConfig,
generates: shopifyApiTypes({
apiType: ApiType.Admin,
apiVersion: "2023-10",
documents: ["./app/**/*.{js,ts,jsx,tsx}"],
outputDir: "./app/types",
}),
},
},
},
};
```

## .graphqlrc file
### `shopifyApiProject`

The quickest way to set this package up is to use `shopifyApiProject`.
To do that, create a `.graphqlrc.ts` file in your app's root folder, and add the following content to it:
This function creates a fully-functional project configuration.

| Option | Type | Default | Description |
| ---------- | ----------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| apiType | `ApiType` | | The API to pull schemas from. |
| apiVersion | `string?` | Latest | Pull schemas for a specific version. |
| outputDir | `string?` | `.` | Where to output the types files. |
| documents | `string[]?` | `./**/*.{ts,tsx}` | Glob pattern for files to parse. |
| module | `string?` | Depends on `ApiType` | Change the module whose types will be overridden. Use this to override the types for any package, as long as it uses the same names. |

#### Example `.graphqlrc.ts` file

```js
import { shopifyApiProject, ApiType } from "@shopify/api-codegen-preset";
Expand All @@ -93,9 +163,6 @@ export default {
};
```

> [!NOTE]
> You can use the other exports to fine-tune your configuration if you want to run other steps, or use a different configuration.
## Generating types

Once you configure your app, you can run `graphql-codegen` to start parsing your queries for types.
Expand Down
3 changes: 1 addition & 2 deletions packages/api-codegen-preset/rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,8 @@ export function getPlugins({ tsconfig, minify } = {}) {
}

const packageName = pkg.name.substring(1);
const repositoryName = pkg.repository.url.split(":")[1].split(".")[0];
export const bannerConfig = {
banner: `/*! ${packageName} -- Copyright (c) 2023-present, Shopify Inc. -- license (MIT): https://github.com/${repositoryName}/blob/main/LICENSE */`,
banner: `/*! ${packageName}@${pkg.version} -- Copyright (c) 2023-present, Shopify Inc. -- license (MIT): https://github.com/Shopify/shopify-api-js/blob/main/LICENSE.md */`,
};

const config = [
Expand Down
5 changes: 3 additions & 2 deletions packages/api-codegen-preset/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export * from "./types";
export * from "./preset";
export * from "./api-types";
export * from "./api-project";
export * from "./preset";
export * from "./types";
export { pluckConfig } from "@shopify/hydrogen-codegen";
2 changes: 1 addition & 1 deletion packages/api-codegen-preset/src/tests/api-types.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ describe("shopifyApiTypes", () => {
});
});

it("defaults missing configs to files when file is present", () => {
it("defaults missing configs to files when file is present", () => {
// GIVEN
const config: ShopifyApiProjectOptions = { apiType };

Expand Down

0 comments on commit e5796da

Please sign in to comment.