# Typing GraphQL operations
The GraphQL clients provided in this package can use [Codegen](https://the-guild.dev/graphql/codegen) to automatically parse and create types for your queries and mutations.
By installing a few packages in your app, you can use the `graphql-codegen` script, which will look for strings with the `#graphql` tag and extract types from them.
If your IDE supports it, you will also get syntax highlighting and auto-complete features when writing your queries.
## See it in action
In this example, we use the `graphql-codegen` script to parse a query in the `/app/routes/new.tsx` file.
Note how VSCode shows the types for both the return type of `response.json()`, and the `variables` option in the `graphql` function.
## Installing packages
To use the `graphql-codegen` script, you will need to install a few packages in your app.
They will include the scripts to run, and the types that will be overridden by the results of parsing your operations.
### Installing packages
```sh
npm add --save-dev @shopify/api-codegen-preset
npm add @shopify/admin-api-client @shopify/storefront-api-client
```
```sh
yarn add --dev @shopify/api-codegen-preset
yarn add @shopify/admin-api-client @shopify/storefront-api-client
```
```sh
pnpm add --save-dev @shopify/api-codegen-preset
pnpm add @shopify/admin-api-client @shopify/storefront-api-client
```
## Setting up .graphqlrc.ts
Before you can parse operations, you'll need to create a `.graphqlrc.ts` file in your project, and configure it to use the `@shopify/api-codegen-preset`.
> Caution: Parsing will not work on `.graphql` documents, because the preset can only apply types from JavaScript and TypeScript const strings.
### Codegen configuration example
```ts
import {shopifyApiProject, ApiType} from '@shopify/api-codegen-preset';
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
default: shopifyApiProject({
apiType: ApiType.Admin,
apiVersion: '2023-10',
documents: ['./app/**/*.{js,ts,jsx,tsx}'],
outputDir: './app/types',
}),
},
};
```
- [Learn more about the available configurations.](https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/api-codegen-preset#configuration): Configuration options
## Setting up the script
To generate types, you'll need to add an entry for `graphql-codegen` in the `"scripts"` section of your `package.json` file.
### Setting up the script
```json
{
"scripts": {
"graphql-codegen": "graphql-codegen"
}
}
```
## Generating types
When you run `graphql-codegen`, it will look in all your configured documents for strings marked with a `#graphql` tag.
IDEs that support the `.graphqlrc.ts` file will provide syntax highlighting for your operations, as well as typing.
> Tip: You can pass in a `--watch` flag to the script, which will update your types every time you save a file.
### Running graphql-codegen
```sh
npm run graphql-codegen
```
```sh
yarn graphql-codegen
```
```sh
pnpm run graphql-codegen
```
## Resources
## References
- [AppProvider](https://shopify.dev/docs/api/shopify-app-remix/v1/entrypoints/appprovider.txt): Sets up the Polaris `AppProvider` and injects the App Bridge script. This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link` component.
- [Admin](https://shopify.dev/docs/api/shopify-app-remix/v1/authenticate/admin.txt): Contains functions for authenticating and interacting with the Admin API. This function can handle requests for apps embedded in the Admin, Admin extensions, or non-embedded apps.
- [Billing](https://shopify.dev/docs/api/shopify-app-remix/v1/apis/billing.txt): Contains function used to bill merchants for your app. This object is returned on authenticated Admin requests.
- [App proxy](https://shopify.dev/docs/api/shopify-app-remix/v1/authenticate/public/app-proxy.txt): The `authenticate.public.appProxy` function validates app proxy requests made by Shopify, and returns a context to enable querying Shopify APIs.
- [Checkout](https://shopify.dev/docs/api/shopify-app-remix/v1/authenticate/public/checkout.txt): The `authenticate.public.checkout` function ensures that checkout extension requests are coming from Shopify, and returns helpers to respond with the correct headers.
- [Webhook](https://shopify.dev/docs/api/shopify-app-remix/v1/authenticate/webhook.txt): Contains functions for verifying Shopify webhooks.
- [Admin API](https://shopify.dev/docs/api/shopify-app-remix/v1/apis/admin-api.txt): Contains objects used to interact with the Admin API. This object is returned as part of different contexts, such as [`admin`](/docs/api/shopify-app-remix/authenticate/admin), [`unauthenticated.admin`](/docs/api/shopify-app-remix/unauthenticated/unauthenticated-admin), and [`webhook`](/docs/api/shopify-app-remix/authenticate/webhook).
- [Storefront API](https://shopify.dev/docs/api/shopify-app-remix/v1/apis/storefront-api.txt): Contains objects used to interact with the Storefront API. This object is returned as part of different contexts, such as [`appProxy`](/docs/api/shopify-app-remix/authenticate/public/app-proxy), and [`unauthenticated.storefront`](/docs/api/shopify-app-remix/unauthenticated/unauthenticated-storefront).
- [shopifyApp](https://shopify.dev/docs/api/shopify-app-remix/v1/entrypoints/shopifyapp.txt): Returns a set of functions that can be used by the app's backend to be able to respond to all Shopify requests. The shape of the returned object changes depending on the value of `distribution`. If it is `AppDistribution.ShopifyAdmin`, then only `ShopifyAppBase` objects are returned, otherwise `ShopifyAppLogin` objects are included.
- [Unauthenticated admin](https://shopify.dev/docs/api/shopify-app-remix/v1/unauthenticated/unauthenticated-admin.txt): Allows interacting with the Admin API on requests that didn't come from Shopify. > Caution: This should only be used for Requests that do not originate from Shopify. > You must do your own authentication before using this method. >This function doesn't perform **any** validation and shouldn't rely on unvalidated user input.
- [Unauthenticated storefront](https://shopify.dev/docs/api/shopify-app-remix/v1/unauthenticated/unauthenticated-storefront.txt): Allows interacting with the Storefront API on requests that didn't come from Shopify. > Caution: This should only be used for Requests that do not originate from Shopify. > You must do your own authentication before using this method. >This function doesn't perform **any** validation and shouldn't rely on unvalidated user input.
- [AppProvider](https://shopify.dev/docs/api/shopify-app-remix/v2/entrypoints/appprovider.txt): Sets up the Polaris `AppProvider` and injects the App Bridge script. This component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) component from Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link` component.
- [AppProxyForm](https://shopify.dev/docs/api/shopify-app-remix/v2/app-proxy-components/appproxyform.txt): Sets up a Remix `