From 0d23d3f3ce335574f6cf9a4d02a67276ac71eaa0 Mon Sep 17 00:00:00 2001
From: Paulo Margarido <64600052+paulomarg@users.noreply.github.com>
Date: Wed, 20 Sep 2023 11:04:50 -0400
Subject: [PATCH 1/3] Further improvements to docs
---
.changeset/small-masks-try.md | 2 +
.../docs/generated/generated_docs_data.json | 7178 +++++------------
.../generated/generated_static_pages.json | 23 +-
.../docs/staticPages/admin.doc.ts | 6 +-
.../docs/staticPages/index.doc.ts | 30 +-
.../components/AppProvider/AppProvider.doc.ts | 8 +-
.../components/AppProvider/AppProvider.tsx | 6 +-
.../admin/authenticate.admin.api.doc.ts | 2 +-
.../admin/authenticate.admin.billing.doc.ts | 4 +-
.../admin/authenticate.admin.doc.ts | 25 +-
.../authenticate/admin/billing/types.ts | 12 +-
.../src/server/authenticate/admin/types.ts | 42 +-
.../authenticate.public.app-proxy.doc.ts | 8 +-
.../authenticate/public/appProxy/types.ts | 10 +-
.../authenticate.public.checkout.doc.ts | 7 +-
.../authenticate/public/checkout/types.ts | 24 +-
.../webhooks/authenticate.webhooks.doc.ts | 7 +-
.../src/server/authenticate/webhooks/types.ts | 15 +-
.../src/server/config-types.ts | 25 +-
.../src/server/shopify-app.doc.ts | 23 +-
.../shopify-app-remix/src/server/types.ts | 82 +-
.../src/server/unauthenticated/admin/types.ts | 7 +-
.../admin/unauthenticated.admin.doc.ts | 8 +-
23 files changed, 2189 insertions(+), 5365 deletions(-)
create mode 100644 .changeset/small-masks-try.md
diff --git a/.changeset/small-masks-try.md b/.changeset/small-masks-try.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/small-masks-try.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/shopify-app-remix/docs/generated/generated_docs_data.json b/packages/shopify-app-remix/docs/generated/generated_docs_data.json
index 81aa4d212d..840bedd556 100644
--- a/packages/shopify-app-remix/docs/generated/generated_docs_data.json
+++ b/packages/shopify-app-remix/docs/generated/generated_docs_data.json
@@ -1,56 +1,16 @@
[
{
"name": "AppProvider",
- "description": "Sets up the Polaris `AppProvider` and injects the App Bridge script.\n\nThis component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) componentfrom Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`component.\n\n\n\n\n\n\n\n\n\n",
+ "description": "Sets up the Polaris `AppProvider` and injects the App Bridge script.\n\nThis 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.\n\n\n\n\n\n\n\n\n\n",
"category": "Entrypoints",
"type": "component",
"isVisualComponent": false,
"definitions": [
{
- "title": "props",
- "description": "React component that sets up App Bridge and Polaris.",
- "type": "AppProviderGeneratedType",
+ "title": "AppProviderProps",
+ "description": "Props for the `AppProvider` component.",
+ "type": "AppProviderProps",
"typeDefinitions": {
- "AppProviderGeneratedType": {
- "filePath": "/react/components/AppProvider/AppProvider.tsx",
- "name": "AppProviderGeneratedType",
- "description": "Sets up the Polaris `AppProvider` and injects the App Bridge script.\n\nThis component extends the [`AppProvider`](https://polaris.shopify.com/components/utilities/app-provider) componentfrom Polaris, and accepts all of its props except for `linkComponent`, which is overridden to use the Remix `Link`component.\n\n\n\n\n\n\n\n\n\n",
- "params": [
- {
- "name": "props",
- "description": "",
- "value": "AppProviderProps",
- "filePath": "/react/components/AppProvider/AppProvider.tsx"
- }
- ],
- "returns": {
- "filePath": "/react/components/AppProvider/AppProvider.tsx",
- "description": "",
- "name": "",
- "value": ""
- },
- "value": "export function AppProvider(props: AppProviderProps) {\n const {\n children,\n apiKey,\n i18n,\n isEmbeddedApp = true,\n __APP_BRIDGE_URL = APP_BRIDGE_URL,\n ...polarisProps\n } = props;\n\n return (\n <>\n {isEmbeddedApp && }\n \n {children}\n \n \n );\n}",
- "examples": [
- {
- "description": "Wrap your app in the `AppProvider` component and pass in your API key.",
- "tabs": [
- {
- "code": "import {authenticate} from '~/shopify.server';\nimport {AppProvider} from '@shopify/shopify-app-remix/react';\n\nexport async function loader({ request }) {\n await authenticate.admin(request);\n\n return json({ apiKey: process.env.SHOPIFY_API_KEY });\n}\n\nexport default function App() {\n const { apiKey } = useLoaderData();\n\n return (\n \n \n \n );\n}",
- "title": "Example"
- }
- ]
- },
- {
- "description": "Load a different locale for Polaris.",
- "tabs": [
- {
- "code": "import {authenticate} from '~/shopify.server';\nimport {AppProvider} from '@shopify/shopify-app-remix/react';\n\nexport async function loader({ request }) {\n await authenticate.admin(request);\n\n return json({\n apiKey: process.env.SHOPIFY_API_KEY,\n polarisTranslations: require(\"@shopify/polaris/locales/fr.json\"),\n });\n}\n\nexport default function App() {\n const { apiKey, polarisTranslations } = useLoaderData();\n\n return (\n \n \n \n );\n}",
- "title": "Example"
- }
- ]
- }
- ]
- },
"AppProviderProps": {
"filePath": "/react/components/AppProvider/AppProvider.tsx",
"name": "AppProviderProps",
@@ -61,7 +21,7 @@
"syntaxKind": "PropertySignature",
"name": "apiKey",
"value": "string",
- "description": "The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.\n\nWhen using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environmentvariable, then you need to pass it from the loader to the component."
+ "description": "The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.\n\nWhen using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment variable, then you need to pass it from the loader to the component."
},
{
"filePath": "/react/components/AppProvider/AppProvider.tsx",
@@ -107,10 +67,12 @@
],
"value": "export interface AppProviderProps\n extends Omit {\n /**\n * The API key for your Shopify app. This is the `Client ID` from the Partner Dashboard.\n *\n * When using the Shopify CLI, this is the `SHOPIFY_API_KEY` environment variable. If you're using the environment\n * variable, then you need to pass it from the loader to the component.\n */\n apiKey: string;\n /**\n * Whether the app is loaded inside the Shopify Admin. Default is `true`.\n *\n * {@link https://shopify.dev/docs/apps/admin/embedded-app-home}\n */\n isEmbeddedApp?: boolean;\n /**\n * The internationalization (i18n) configuration for your Polaris provider.\n *\n * {@link https://polaris.shopify.com/components/utilities/app-provider}\n */\n i18n?: PolarisAppProviderProps['i18n'];\n /**\n * Used internally by Shopify. You don't need to set this.\n * @private\n */\n __APP_BRIDGE_URL?: string;\n}"
}
- },
- "jsDocExamples": true
+ }
}
],
+ "jsDocTypeExamples": [
+ "AppProviderGeneratedType"
+ ],
"related": [
{
"name": "App bridge",
@@ -126,12 +88,12 @@
}
],
"examples": {
- "description": "Usage examples",
+ "description": "",
"examples": [
{
- "description": "",
+ "description": "Wrap your app in the `AppProvider` component and pass in your API key.",
"codeblock": {
- "title": "Wrap your app in the `AppProvider` component and pass in your API key.",
+ "title": "Set up AppProvider",
"tabs": [
{
"title": "Example",
@@ -142,9 +104,9 @@
}
},
{
- "description": "",
+ "description": "Pass in a different locale for Polaris to translate its components.",
"codeblock": {
- "title": "Load a different locale for Polaris.",
+ "title": "Localize Polaris components",
"tabs": [
{
"title": "Example",
@@ -182,7 +144,8 @@
"description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
"examples": [
{
- "description": "Getting the number of orders in a store using REST resources",
+ "title": "Using REST resources",
+ "description": "Getting the number of orders in a store using REST resources.",
"tabs": [
{
"code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
@@ -195,12 +158,9 @@
]
},
{
- "description": "Performing a GET request to the REST API",
+ "title": "Performing a GET request to the REST API",
+ "description": "Use `admin.rest.` to make custom requests to the API.",
"tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
{
"code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
"title": "/app/routes/**\\/*.ts"
@@ -217,7 +177,8 @@
"description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
"examples": [
{
- "description": "Creating a new product",
+ "title": "Querying the GraphQL API",
+ "description": "Use `admin.graphql` to make query / mutation requests.",
"tabs": [
{
"code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
@@ -228,7 +189,7 @@
]
}
],
- "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Getting the number of orders in a store using REST resources\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Creating a new product\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
+ "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Using REST resources.\n * Getting the number of orders in a store using REST resources.\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API.\n * Use `admin.rest.` to make custom requests to the API.\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Querying the GraphQL API.\n * Use `admin.graphql` to make query / mutation requests.\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
},
"RestClientWithResources": {
"filePath": "/server/clients/admin/rest.ts",
@@ -317,10 +278,12 @@
],
"value": "interface QueryVariables {\n [key: string]: any;\n}"
}
- },
- "jsDocExamples": true
+ }
}
],
+ "jsDocTypeExamples": [
+ "AdminApiContext"
+ ],
"related": [
{
"name": "Authenticated context",
@@ -334,15 +297,15 @@
}
],
"examples": {
- "description": "Usage examples",
+ "description": "",
"exampleGroups": [
{
"title": "rest",
"examples": [
{
- "description": "",
+ "description": "Getting the number of orders in a store using REST resources.",
"codeblock": {
- "title": "Getting the number of orders in a store using REST resources",
+ "title": "Using REST resources",
"tabs": [
{
"title": "/app/shopify.server.ts",
@@ -358,15 +321,10 @@
}
},
{
- "description": "",
+ "description": "Use `admin.rest.` to make custom requests to the API.",
"codeblock": {
"title": "Performing a GET request to the REST API",
"tabs": [
- {
- "title": "/app/shopify.server.ts",
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- },
{
"title": "/app/routes/**\\/*.ts",
"code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
@@ -381,9 +339,9 @@
"title": "graphql",
"examples": [
{
- "description": "",
+ "description": "Use `admin.graphql` to make query / mutation requests.",
"codeblock": {
- "title": "Creating a new product",
+ "title": "Querying the GraphQL API",
"tabs": [
{
"title": "Example",
@@ -400,7 +358,7 @@
},
{
"name": "Billing",
- "description": "Contains function used to bill merchants for your app.\n\nThis object is returned on authenticated Admin requests. Refer to the [Related](#related) section for more information.",
+ "description": "Contains function used to bill merchants for your app.\n\nThis object is returned on authenticated Admin requests.",
"category": "APIs",
"type": "object",
"isVisualComponent": false,
@@ -423,7 +381,8 @@
"description": "Checks if the shop has an active payment for any plan defined in the `billing` config option.",
"examples": [
{
- "description": "Requesting billing right away",
+ "title": "Requesting billing right away",
+ "description": "Call `billing.request` in the `onFailure` callback to immediately request payment.",
"tabs": [
{
"code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n isTest: true,\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n // App logic\n};",
@@ -436,7 +395,8 @@
]
},
{
- "description": "Redirecting to a page where the merchant can select a plan",
+ "title": "Using a plan selection page",
+ "description": "Redirect to a different page in the `onFailure` callback, where the merchant can select a billing plan.",
"tabs": [
{
"code": "import { LoaderArgs, redirect } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n isTest: true,\n onFailure: () => redirect('/select-plan'),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n\n // App logic\n};",
@@ -458,7 +418,8 @@
"description": "Requests payment for the plan.",
"examples": [
{
- "description": "Requesting billing when there is no payment with a custom return URL",
+ "title": "Using a custom return URL",
+ "description": "Change where the merchant is returned to after approving the purchase using the `returnUrl` option.",
"tabs": [
{
"code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({\n plan: MONTHLY_PLAN,\n isTest: true,\n returnUrl: '/billing-complete',\n }),\n });\n\n // App logic\n};",
@@ -480,7 +441,8 @@
"description": "Cancels an ongoing subscription, given its ID.",
"examples": [
{
- "description": "Cancelling a subscription",
+ "title": "Cancelling a subscription",
+ "description": "Use the `billing.cancel` function to cancel an active subscription with the id returned from `billing.require`.",
"tabs": [
{
"code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n const cancelledSubscription = await billing.cancel({\n subscriptionId: subscription.id,\n isTest: true,\n prorate: true,\n });\n\n // App logic\n};",
@@ -495,7 +457,7 @@
]
}
],
- "value": "export interface BillingContext {\n /**\n * Checks if the shop has an active payment for any plan defined in the `billing` config option.\n *\n * @returns A promise that resolves to an object containing the active purchases for the shop.\n *\n * @example\n * Requesting billing right away\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * isTest: true,\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * @example\n * Redirecting to a page where the merchant can select a plan\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, redirect } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n * isTest: true,\n * onFailure: () => redirect('/select-plan'),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n require: (\n options: RequireBillingOptions,\n ) => Promise;\n\n /**\n * Requests payment for the plan.\n *\n * @returns Redirects to the confirmation URL for the payment.\n *\n * @example\n * Requesting billing when there is no payment with a custom return URL\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({\n * plan: MONTHLY_PLAN,\n * isTest: true,\n * returnUrl: '/billing-complete',\n * }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n request: (options: RequestBillingOptions) => Promise;\n\n /**\n * Cancels an ongoing subscription, given its ID.\n *\n * @returns The cancelled subscription.\n *\n * @example\n * Cancelling a subscription\n * ```ts\n * // /app/routes/cancel-subscription.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * const cancelledSubscription = await billing.cancel({\n * subscriptionId: subscription.id,\n * isTest: true,\n * prorate: true,\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n cancel: (options: CancelBillingOptions) => Promise;\n}"
+ "value": "export interface BillingContext {\n /**\n * Checks if the shop has an active payment for any plan defined in the `billing` config option.\n *\n * @returns A promise that resolves to an object containing the active purchases for the shop.\n *\n * @example\n * Requesting billing right away.\n * Call `billing.request` in the `onFailure` callback to immediately request payment.\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * isTest: true,\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * @example\n * Using a plan selection page.\n * Redirect to a different page in the `onFailure` callback, where the merchant can select a billing plan.\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, redirect } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n * isTest: true,\n * onFailure: () => redirect('/select-plan'),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n require: (\n options: RequireBillingOptions,\n ) => Promise;\n\n /**\n * Requests payment for the plan.\n *\n * @returns Redirects to the confirmation URL for the payment.\n *\n * @example\n * Using a custom return URL.\n * Change where the merchant is returned to after approving the purchase using the `returnUrl` option.\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({\n * plan: MONTHLY_PLAN,\n * isTest: true,\n * returnUrl: '/billing-complete',\n * }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n request: (options: RequestBillingOptions) => Promise;\n\n /**\n * Cancels an ongoing subscription, given its ID.\n *\n * @returns The cancelled subscription.\n *\n * @example\n * Cancelling a subscription.\n * Use the `billing.cancel` function to cancel an active subscription with the id returned from `billing.require`.\n * ```ts\n * // /app/routes/cancel-subscription.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * const cancelledSubscription = await billing.cancel({\n * subscriptionId: subscription.id,\n * isTest: true,\n * prorate: true,\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n cancel: (options: CancelBillingOptions) => Promise;\n}"
},
"RequireBillingOptions": {
"filePath": "/server/authenticate/admin/billing/types.ts",
@@ -589,10 +551,12 @@
],
"value": "export interface CancelBillingOptions {\n /**\n * The ID of the subscription to cancel.\n */\n subscriptionId: string;\n /**\n * Whether to prorate the cancellation.\n *\n * {@link https://shopify.dev/docs/apps/billing/subscriptions/cancel-recurring-charges}\n */\n prorate?: boolean;\n isTest?: boolean;\n}"
}
- },
- "jsDocExamples": true
+ }
}
],
+ "jsDocTypeExamples": [
+ "BillingContext"
+ ],
"related": [
{
"name": "Admin context",
@@ -601,13 +565,13 @@
}
],
"examples": {
- "description": "Usage examples",
+ "description": "",
"exampleGroups": [
{
"title": "require",
"examples": [
{
- "description": "",
+ "description": "Call `billing.request` in the `onFailure` callback to immediately request payment.",
"codeblock": {
"title": "Requesting billing right away",
"tabs": [
@@ -625,9 +589,9 @@
}
},
{
- "description": "",
+ "description": "Redirect to a different page in the `onFailure` callback, where the merchant can select a billing plan.",
"codeblock": {
- "title": "Redirecting to a page where the merchant can select a plan",
+ "title": "Using a plan selection page",
"tabs": [
{
"title": "/app/routes/**\\/*.ts",
@@ -648,9 +612,9 @@
"title": "request",
"examples": [
{
- "description": "",
+ "description": "Change where the merchant is returned to after approving the purchase using the `returnUrl` option.",
"codeblock": {
- "title": "Requesting billing when there is no payment with a custom return URL",
+ "title": "Using a custom return URL",
"tabs": [
{
"title": "/app/routes/**\\/*.ts",
@@ -671,7 +635,7 @@
"title": "cancel",
"examples": [
{
- "description": "",
+ "description": "Use the `billing.cancel` function to cancel an active subscription with the id returned from `billing.require`.",
"codeblock": {
"title": "Cancelling a subscription",
"tabs": [
@@ -695,7 +659,7 @@
},
{
"name": "Admin",
- "description": "Contains functions for authenticating and interacting with the Admin API.\n\nThis function can handle requests for apps embedded in the Admin, Admin extensions, or non-embedded apps.\n\nRefer to the [Related](#related) section to see all supported actions in `admin` and `billing`.",
+ "description": "Contains functions for authenticating and interacting with the Admin API.\n\nThis function can handle requests for apps embedded in the Admin, Admin extensions, or non-embedded apps.",
"category": "Authenticate",
"type": "object",
"isVisualComponent": false,
@@ -745,27 +709,29 @@
"description": "The session for the user who made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
"examples": [
{
- "description": "Getting your app's shop-specific widget data using an offline session",
+ "title": "Using offline sessions",
+ "description": "Get your app's shop-specific data using an offline session.",
"tabs": [
{
"code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
"title": "shopify.server.ts"
},
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({shop: session.shop));\n};",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getMyAppData({shop: session.shop));\n};",
"title": "/app/routes/**\\/*.ts"
}
]
},
{
- "description": "Getting your app's user-specific widget data using an online session",
+ "title": "Using online sessions",
+ "description": "Get your app's user-specific data using an online session.",
"tabs": [
{
"code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
"title": "shopify.server.ts"
},
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({user: session.onlineAccessInfo!.id}));\n};",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getMyAppData({user: session.onlineAccessInfo!.id}));\n};",
"title": "/app/routes/**\\/*.ts"
}
]
@@ -794,11 +760,12 @@
"description": "A function that ensures the CORS headers are set correctly for the response.",
"examples": [
{
- "description": "Setting CORS headers for a admin request",
+ "title": "Setting CORS headers for a admin request",
+ "description": "Use the `cors` helper to ensure your app can respond to requests from admin extensions.",
"tabs": [
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getWidgets({user: session.onlineAccessInfo!.id})));\n};",
- "title": "/app/routes/admin/widgets.ts"
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getMyAppData({user: session.onlineAccessInfo!.id})));\n};",
+ "title": "/app/routes/admin/my-route.ts"
}
]
}
@@ -820,7 +787,8 @@
"description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
"examples": [
{
- "description": "Getting the number of orders in a store using REST resources",
+ "title": "Using REST resources",
+ "description": "Getting the number of orders in a store using REST resources.",
"tabs": [
{
"code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
@@ -833,12 +801,9 @@
]
},
{
- "description": "Performing a GET request to the REST API",
+ "title": "Performing a GET request to the REST API",
+ "description": "Use `admin.rest.` to make custom requests to the API.",
"tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
{
"code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
"title": "/app/routes/**\\/*.ts"
@@ -855,7 +820,8 @@
"description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
"examples": [
{
- "description": "Creating a new product",
+ "title": "Querying the GraphQL API",
+ "description": "Use `admin.graphql` to make query / mutation requests.",
"tabs": [
{
"code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
@@ -866,7 +832,7 @@
]
}
],
- "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Getting the number of orders in a store using REST resources\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Creating a new product\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
+ "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Using REST resources.\n * Getting the number of orders in a store using REST resources.\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API.\n * Use `admin.rest.` to make custom requests to the API.\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Querying the GraphQL API.\n * Use `admin.graphql` to make query / mutation requests.\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
},
"RestClientWithResources": {
"filePath": "/server/clients/admin/rest.ts",
@@ -968,7 +934,8 @@
"description": "Checks if the shop has an active payment for any plan defined in the `billing` config option.",
"examples": [
{
- "description": "Requesting billing right away",
+ "title": "Requesting billing right away",
+ "description": "Call `billing.request` in the `onFailure` callback to immediately request payment.",
"tabs": [
{
"code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n isTest: true,\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n // App logic\n};",
@@ -981,7 +948,8 @@
]
},
{
- "description": "Redirecting to a page where the merchant can select a plan",
+ "title": "Using a plan selection page",
+ "description": "Redirect to a different page in the `onFailure` callback, where the merchant can select a billing plan.",
"tabs": [
{
"code": "import { LoaderArgs, redirect } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n isTest: true,\n onFailure: () => redirect('/select-plan'),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n\n // App logic\n};",
@@ -1003,7 +971,8 @@
"description": "Requests payment for the plan.",
"examples": [
{
- "description": "Requesting billing when there is no payment with a custom return URL",
+ "title": "Using a custom return URL",
+ "description": "Change where the merchant is returned to after approving the purchase using the `returnUrl` option.",
"tabs": [
{
"code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({\n plan: MONTHLY_PLAN,\n isTest: true,\n returnUrl: '/billing-complete',\n }),\n });\n\n // App logic\n};",
@@ -1025,7 +994,8 @@
"description": "Cancels an ongoing subscription, given its ID.",
"examples": [
{
- "description": "Cancelling a subscription",
+ "title": "Cancelling a subscription",
+ "description": "Use the `billing.cancel` function to cancel an active subscription with the id returned from `billing.require`.",
"tabs": [
{
"code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n const cancelledSubscription = await billing.cancel({\n subscriptionId: subscription.id,\n isTest: true,\n prorate: true,\n });\n\n // App logic\n};",
@@ -1040,7 +1010,7 @@
]
}
],
- "value": "export interface BillingContext {\n /**\n * Checks if the shop has an active payment for any plan defined in the `billing` config option.\n *\n * @returns A promise that resolves to an object containing the active purchases for the shop.\n *\n * @example\n * Requesting billing right away\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * isTest: true,\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * @example\n * Redirecting to a page where the merchant can select a plan\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, redirect } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n * isTest: true,\n * onFailure: () => redirect('/select-plan'),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n require: (\n options: RequireBillingOptions,\n ) => Promise;\n\n /**\n * Requests payment for the plan.\n *\n * @returns Redirects to the confirmation URL for the payment.\n *\n * @example\n * Requesting billing when there is no payment with a custom return URL\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({\n * plan: MONTHLY_PLAN,\n * isTest: true,\n * returnUrl: '/billing-complete',\n * }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n request: (options: RequestBillingOptions) => Promise;\n\n /**\n * Cancels an ongoing subscription, given its ID.\n *\n * @returns The cancelled subscription.\n *\n * @example\n * Cancelling a subscription\n * ```ts\n * // /app/routes/cancel-subscription.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * const cancelledSubscription = await billing.cancel({\n * subscriptionId: subscription.id,\n * isTest: true,\n * prorate: true,\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n cancel: (options: CancelBillingOptions) => Promise;\n}"
+ "value": "export interface BillingContext {\n /**\n * Checks if the shop has an active payment for any plan defined in the `billing` config option.\n *\n * @returns A promise that resolves to an object containing the active purchases for the shop.\n *\n * @example\n * Requesting billing right away.\n * Call `billing.request` in the `onFailure` callback to immediately request payment.\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * isTest: true,\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * @example\n * Using a plan selection page.\n * Redirect to a different page in the `onFailure` callback, where the merchant can select a billing plan.\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, redirect } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n * isTest: true,\n * onFailure: () => redirect('/select-plan'),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n require: (\n options: RequireBillingOptions,\n ) => Promise;\n\n /**\n * Requests payment for the plan.\n *\n * @returns Redirects to the confirmation URL for the payment.\n *\n * @example\n * Using a custom return URL.\n * Change where the merchant is returned to after approving the purchase using the `returnUrl` option.\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({\n * plan: MONTHLY_PLAN,\n * isTest: true,\n * returnUrl: '/billing-complete',\n * }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n request: (options: RequestBillingOptions) => Promise;\n\n /**\n * Cancels an ongoing subscription, given its ID.\n *\n * @returns The cancelled subscription.\n *\n * @example\n * Cancelling a subscription.\n * Use the `billing.cancel` function to cancel an active subscription with the id returned from `billing.require`.\n * ```ts\n * // /app/routes/cancel-subscription.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * const cancelledSubscription = await billing.cancel({\n * subscriptionId: subscription.id,\n * isTest: true,\n * prorate: true,\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n cancel: (options: CancelBillingOptions) => Promise;\n}"
},
"RequireBillingOptions": {
"filePath": "/server/authenticate/admin/billing/types.ts",
@@ -1147,14 +1117,15 @@
"description": "The decoded and validated session token for the request.\n\nReturned only if `isEmbeddedApp` is `true`.\n\n\n\n\n",
"examples": [
{
- "description": "Getting your app's user-specific widget data using the session token",
+ "title": "Using the decoded session token",
+ "description": "Get user-specific data using the `sessionToken` object.",
"tabs": [
{
"code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
"title": "shopify.server.ts"
},
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public(\n request\n );\n return json(await getWidgets({user: sessionToken.sub}));\n};",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public.checkout(\n request\n );\n return json(await getMyAppData({user: sessionToken.sub}));\n};",
"title": "/app/routes/**\\/*.ts"
}
]
@@ -1166,23 +1137,25 @@
"syntaxKind": "PropertySignature",
"name": "redirect",
"value": "RedirectFunction",
- "description": "A function that redirects the user to a new page, ensuring that the appropriate parameters are set for embeddedapps.\n\nReturned only if `isEmbeddedApp` is `true`.",
+ "description": "A function that redirects the user to a new page, ensuring that the appropriate parameters are set for embedded apps.\n\nReturned only if `isEmbeddedApp` is `true`.",
"examples": [
{
- "description": "Redirecting the user to the app's homepage",
+ "title": "Redirecting to an app route",
+ "description": "Use the `redirect` helper to safely redirect between pages.",
"tabs": [
{
"code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\");\n};",
- "title": "/app/routes/admin/widgets.ts"
+ "title": "/app/routes/admin/my-route.ts"
}
]
},
{
- "description": "Redirecting outside of Shopify Admin",
+ "title": "Redirecting outside of Shopify admin",
+ "description": "Pass in a `target` option of `_top` or `_parent` to go to an external URL.",
"tabs": [
{
"code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\", { target: '_parent' });\n};",
- "title": "/app/routes/admin/widgets.ts"
+ "title": "/app/routes/admin/my-route.ts"
}
]
}
@@ -1196,27 +1169,29 @@
"description": "The session for the user who made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
"examples": [
{
- "description": "Getting your app's shop-specific widget data using an offline session",
+ "title": "Using offline sessions",
+ "description": "Get your app's shop-specific data using an offline session.",
"tabs": [
{
"code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
"title": "shopify.server.ts"
},
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({shop: session.shop));\n};",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getMyAppData({shop: session.shop));\n};",
"title": "/app/routes/**\\/*.ts"
}
]
},
{
- "description": "Getting your app's user-specific widget data using an online session",
+ "title": "Using online sessions",
+ "description": "Get your app's user-specific data using an online session.",
"tabs": [
{
"code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
"title": "shopify.server.ts"
},
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({user: session.onlineAccessInfo!.id}));\n};",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getMyAppData({user: session.onlineAccessInfo!.id}));\n};",
"title": "/app/routes/**\\/*.ts"
}
]
@@ -1245,18 +1220,19 @@
"description": "A function that ensures the CORS headers are set correctly for the response.",
"examples": [
{
- "description": "Setting CORS headers for a admin request",
+ "title": "Setting CORS headers for a admin request",
+ "description": "Use the `cors` helper to ensure your app can respond to requests from admin extensions.",
"tabs": [
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getWidgets({user: session.onlineAccessInfo!.id})));\n};",
- "title": "/app/routes/admin/widgets.ts"
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getMyAppData({user: session.onlineAccessInfo!.id})));\n};",
+ "title": "/app/routes/admin/my-route.ts"
}
]
}
]
}
],
- "value": "export interface EmbeddedAdminContext<\n Config extends AppConfigArg,\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends AdminContextInternal {\n /**\n * The decoded and validated session token for the request.\n *\n * Returned only if `isEmbeddedApp` is `true`.\n *\n * {@link https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload}\n *\n * @example\n * Getting your app's user-specific widget data using the session token\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n *\n * const shopify = shopifyApp({\n * // ...etc\n * useOnlineTokens: true,\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken } = await authenticate.public(\n * request\n * );\n * return json(await getWidgets({user: sessionToken.sub}));\n * };\n * ```\n */\n sessionToken: JwtPayload;\n\n /**\n * A function that redirects the user to a new page, ensuring that the appropriate parameters are set for embedded\n * apps.\n *\n * Returned only if `isEmbeddedApp` is `true`.\n *\n * @example\n * Redirecting the user to the app's homepage\n * ```ts\n * // /app/routes/admin/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { session, redirect } = await authenticate.admin(request);\n * return redirect(\"/\");\n * };\n * ```\n *\n * @example\n * Redirecting outside of Shopify Admin\n * ```ts\n * // /app/routes/admin/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { session, redirect } = await authenticate.admin(request);\n * return redirect(\"/\", { target: '_parent' });\n * };\n * ```\n */\n redirect: RedirectFunction;\n}"
+ "value": "export interface EmbeddedAdminContext<\n Config extends AppConfigArg,\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends AdminContextInternal {\n /**\n * The decoded and validated session token for the request.\n *\n * Returned only if `isEmbeddedApp` is `true`.\n *\n * {@link https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload}\n *\n * @example\n * Using the decoded session token.\n * Get user-specific data using the `sessionToken` object.\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n *\n * const shopify = shopifyApp({\n * // ...etc\n * useOnlineTokens: true,\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getMyAppData } from \"~/db/model.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken } = await authenticate.public.checkout(\n * request\n * );\n * return json(await getMyAppData({user: sessionToken.sub}));\n * };\n * ```\n */\n sessionToken: JwtPayload;\n\n /**\n * A function that redirects the user to a new page, ensuring that the appropriate parameters are set for embedded\n * apps.\n *\n * Returned only if `isEmbeddedApp` is `true`.\n *\n * @example\n * Redirecting to an app route.\n * Use the `redirect` helper to safely redirect between pages.\n * ```ts\n * // /app/routes/admin/my-route.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { session, redirect } = await authenticate.admin(request);\n * return redirect(\"/\");\n * };\n * ```\n *\n * @example\n * Redirecting outside of Shopify admin.\n * Pass in a `target` option of `_top` or `_parent` to go to an external URL.\n * ```ts\n * // /app/routes/admin/my-route.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { session, redirect } = await authenticate.admin(request);\n * return redirect(\"/\", { target: '_parent' });\n * };\n * ```\n */\n redirect: RedirectFunction;\n}"
},
"RedirectFunction": {
"filePath": "/server/authenticate/admin/helpers/redirect.ts",
@@ -1299,4267 +1275,488 @@
"value": "'_self' | '_parent' | '_top'",
"description": ""
}
- },
- "jsDocExamples": false
+ }
+ }
+ ],
+ "jsDocTypeExamples": [
+ "EmbeddedAdminContext",
+ "AdminApiContext",
+ "BillingContext"
+ ],
+ "related": [
+ {
+ "name": "API context",
+ "subtitle": "Interact with the Admin API.",
+ "url": "/docs/api/shopify-app-remix/apis/admin-api"
},
{
- "title": "AdminContext",
- "description": "Object returned by `authenticate.admin`.",
- "type": "EmbeddedAdminContext",
- "typeDefinitions": {
- "EmbeddedAdminContext": {
- "filePath": "/server/authenticate/admin/types.ts",
- "name": "EmbeddedAdminContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "sessionToken",
- "value": "JwtPayload",
- "description": "The decoded and validated session token for the request.\n\nReturned only if `isEmbeddedApp` is `true`.\n\n\n\n\n",
- "examples": [
+ "name": "Billing context",
+ "subtitle": "Bill merchants for your app using the Admin API.",
+ "url": "/docs/api/shopify-app-remix/apis/billing"
+ }
+ ],
+ "examples": {
+ "description": "",
+ "exampleGroups": [
+ {
+ "title": "sessionToken",
+ "examples": [
+ {
+ "description": "Get user-specific data using the `sessionToken` object.",
+ "codeblock": {
+ "title": "Using the decoded session token",
+ "tabs": [
{
- "description": "Getting your app's user-specific widget data using the session token",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public(\n request\n );\n return json(await getWidgets({user: sessionToken.sub}));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
+ "title": "shopify.server.ts",
+ "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
+ },
+ {
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public.checkout(\n request\n );\n return json(await getMyAppData({user: sessionToken.sub}));\n};",
+ "language": "typescript"
}
]
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "redirect",
- "value": "RedirectFunction",
- "description": "A function that redirects the user to a new page, ensuring that the appropriate parameters are set for embeddedapps.\n\nReturned only if `isEmbeddedApp` is `true`.",
- "examples": [
+ }
+ }
+ ]
+ },
+ {
+ "title": "redirect",
+ "examples": [
+ {
+ "description": "Use the `redirect` helper to safely redirect between pages.",
+ "codeblock": {
+ "title": "Redirecting to an app route",
+ "tabs": [
{
- "description": "Redirecting the user to the app's homepage",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\");\n};",
- "title": "/app/routes/admin/widgets.ts"
- }
- ]
+ "title": "/app/routes/admin/my-route.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\");\n};",
+ "language": "typescript"
+ }
+ ]
+ }
+ },
+ {
+ "description": "Pass in a `target` option of `_top` or `_parent` to go to an external URL.",
+ "codeblock": {
+ "title": "Redirecting outside of Shopify admin",
+ "tabs": [
+ {
+ "title": "/app/routes/admin/my-route.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\", { target: '_parent' });\n};",
+ "language": "typescript"
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "title": "session",
+ "examples": [
+ {
+ "description": "Get your app's shop-specific data using an offline session.",
+ "codeblock": {
+ "title": "Using offline sessions",
+ "tabs": [
+ {
+ "title": "shopify.server.ts",
+ "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
},
{
- "description": "Redirecting outside of Shopify Admin",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\", { target: '_parent' });\n};",
- "title": "/app/routes/admin/widgets.ts"
- }
- ]
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getMyAppData({shop: session.shop));\n};",
+ "language": "typescript"
}
]
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": "The session for the user who made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
- "examples": [
+ }
+ },
+ {
+ "description": "Get your app's user-specific data using an online session.",
+ "codeblock": {
+ "title": "Using online sessions",
+ "tabs": [
{
- "description": "Getting your app's shop-specific widget data using an offline session",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({shop: session.shop));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
+ "title": "shopify.server.ts",
+ "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
},
{
- "description": "Getting your app's user-specific widget data using an online session",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({user: session.onlineAccessInfo!.id}));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getMyAppData({user: session.onlineAccessInfo!.id}));\n};",
+ "language": "typescript"
}
]
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "AdminApiContext",
- "description": "Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request."
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "billing",
- "value": "BillingContext",
- "description": "Billing methods for this store, based on the plans defined in the `billing` config option.\n\n\n\n\n"
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "cors",
- "value": "EnsureCORSFunction",
- "description": "A function that ensures the CORS headers are set correctly for the response.",
- "examples": [
+ }
+ }
+ ]
+ },
+ {
+ "title": "cors",
+ "examples": [
+ {
+ "description": "Use the `cors` helper to ensure your app can respond to requests from admin extensions.",
+ "codeblock": {
+ "title": "Setting CORS headers for a admin request",
+ "tabs": [
{
- "description": "Setting CORS headers for a admin request",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getWidgets({user: session.onlineAccessInfo!.id})));\n};",
- "title": "/app/routes/admin/widgets.ts"
- }
- ]
+ "title": "/app/routes/admin/my-route.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getMyAppData({user: session.onlineAccessInfo!.id})));\n};",
+ "language": "typescript"
}
]
}
- ],
- "value": "export interface EmbeddedAdminContext<\n Config extends AppConfigArg,\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends AdminContextInternal {\n /**\n * The decoded and validated session token for the request.\n *\n * Returned only if `isEmbeddedApp` is `true`.\n *\n * {@link https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload}\n *\n * @example\n * Getting your app's user-specific widget data using the session token\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n *\n * const shopify = shopifyApp({\n * // ...etc\n * useOnlineTokens: true,\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken } = await authenticate.public(\n * request\n * );\n * return json(await getWidgets({user: sessionToken.sub}));\n * };\n * ```\n */\n sessionToken: JwtPayload;\n\n /**\n * A function that redirects the user to a new page, ensuring that the appropriate parameters are set for embedded\n * apps.\n *\n * Returned only if `isEmbeddedApp` is `true`.\n *\n * @example\n * Redirecting the user to the app's homepage\n * ```ts\n * // /app/routes/admin/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { session, redirect } = await authenticate.admin(request);\n * return redirect(\"/\");\n * };\n * ```\n *\n * @example\n * Redirecting outside of Shopify Admin\n * ```ts\n * // /app/routes/admin/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { session, redirect } = await authenticate.admin(request);\n * return redirect(\"/\", { target: '_parent' });\n * };\n * ```\n */\n redirect: RedirectFunction;\n}"
- },
- "RedirectFunction": {
- "filePath": "/server/authenticate/admin/helpers/redirect.ts",
- "name": "RedirectFunction",
- "description": "",
- "params": [
- {
- "name": "url",
- "description": "",
- "value": "string",
- "filePath": "/server/authenticate/admin/helpers/redirect.ts"
- },
- {
- "name": "init",
- "description": "",
- "value": "RedirectInit",
- "isOptional": true,
- "filePath": "/server/authenticate/admin/helpers/redirect.ts"
- }
- ],
- "returns": {
- "filePath": "/server/authenticate/admin/helpers/redirect.ts",
- "description": "",
- "name": "TypedResponse",
- "value": "TypedResponse"
- },
- "value": "export type RedirectFunction = (\n url: string,\n init?: RedirectInit,\n) => TypedResponse;"
- },
- "RedirectInit": {
- "filePath": "/server/authenticate/admin/helpers/redirect.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RedirectInit",
- "value": "number | (ResponseInit & {target?: RedirectTarget})",
- "description": ""
- },
- "RedirectTarget": {
- "filePath": "/server/authenticate/admin/helpers/redirect.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RedirectTarget",
- "value": "'_self' | '_parent' | '_top'",
- "description": ""
- },
- "AdminApiContext": {
- "filePath": "/server/config-types.ts",
- "name": "AdminApiContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "rest",
- "value": "RestClientWithResources",
- "description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
- "examples": [
- {
- "description": "Getting the number of orders in a store using REST resources",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- },
- {
- "description": "Performing a GET request to the REST API",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "graphql",
- "value": "GraphqlQueryFunction",
- "description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
- "examples": [
- {
- "description": "Creating a new product",
- "tabs": [
- {
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Getting the number of orders in a store using REST resources\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Creating a new product\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
- },
- "RestClientWithResources": {
- "filePath": "/server/clients/admin/rest.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RestClientWithResources",
- "value": "RemixRestClient & {resources: Resources}",
- "description": ""
- },
- "GraphqlQueryFunction": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "GraphqlQueryFunction",
- "description": "",
- "params": [
- {
- "name": "query",
- "description": "",
- "value": "string",
- "filePath": "/server/clients/admin/graphql.ts"
- },
- {
- "name": "options",
- "description": "",
- "value": "QueryOptions",
- "isOptional": true,
- "filePath": "/server/clients/admin/graphql.ts"
- }
- ],
- "returns": {
- "filePath": "/server/clients/admin/graphql.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type GraphqlQueryFunction = (\n query: string,\n options?: QueryOptions,\n) => Promise;"
- },
- "QueryOptions": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "variables",
- "value": "QueryVariables",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "ApiVersion",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "headers",
- "value": "{ [key: string]: any; }",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "tries",
- "value": "number",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "interface QueryOptions {\n variables?: QueryVariables;\n apiVersion?: ApiVersion;\n headers?: {[key: string]: any};\n tries?: number;\n}"
- },
- "QueryVariables": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryVariables",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "[key: string]",
- "value": "any"
- }
- ],
- "value": "interface QueryVariables {\n [key: string]: any;\n}"
- },
- "BillingContext": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "BillingContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "require",
- "value": "(options: RequireBillingOptions) => Promise",
- "description": "Checks if the shop has an active payment for any plan defined in the `billing` config option.",
- "examples": [
+ }
+ ]
+ },
+ {
+ "title": "rest",
+ "examples": [
+ {
+ "description": "Getting the number of orders in a store using REST resources.",
+ "codeblock": {
+ "title": "Using REST resources",
+ "tabs": [
{
- "description": "Requesting billing right away",
- "tabs": [
- {
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n isTest: true,\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
+ "title": "/app/shopify.server.ts",
+ "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
},
{
- "description": "Redirecting to a page where the merchant can select a plan",
- "tabs": [
- {
- "code": "import { LoaderArgs, redirect } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n isTest: true,\n onFailure: () => redirect('/select-plan'),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "request",
- "value": "(options: RequestBillingOptions) => Promise",
- "description": "Requests payment for the plan.",
- "examples": [
- {
- "description": "Requesting billing when there is no payment with a custom return URL",
- "tabs": [
- {
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({\n plan: MONTHLY_PLAN,\n isTest: true,\n returnUrl: '/billing-complete',\n }),\n });\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "cancel",
- "value": "(options: CancelBillingOptions) => Promise",
- "description": "Cancels an ongoing subscription, given its ID.",
- "examples": [
- {
- "description": "Cancelling a subscription",
- "tabs": [
- {
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n const cancelledSubscription = await billing.cancel({\n subscriptionId: subscription.id,\n isTest: true,\n prorate: true,\n });\n\n // App logic\n};",
- "title": "/app/routes/cancel-subscription.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface BillingContext {\n /**\n * Checks if the shop has an active payment for any plan defined in the `billing` config option.\n *\n * @returns A promise that resolves to an object containing the active purchases for the shop.\n *\n * @example\n * Requesting billing right away\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * isTest: true,\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * @example\n * Redirecting to a page where the merchant can select a plan\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, redirect } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n * isTest: true,\n * onFailure: () => redirect('/select-plan'),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n require: (\n options: RequireBillingOptions,\n ) => Promise;\n\n /**\n * Requests payment for the plan.\n *\n * @returns Redirects to the confirmation URL for the payment.\n *\n * @example\n * Requesting billing when there is no payment with a custom return URL\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({\n * plan: MONTHLY_PLAN,\n * isTest: true,\n * returnUrl: '/billing-complete',\n * }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n request: (options: RequestBillingOptions) => Promise;\n\n /**\n * Cancels an ongoing subscription, given its ID.\n *\n * @returns The cancelled subscription.\n *\n * @example\n * Cancelling a subscription\n * ```ts\n * // /app/routes/cancel-subscription.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * const cancelledSubscription = await billing.cancel({\n * subscriptionId: subscription.id,\n * isTest: true,\n * prorate: true,\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n cancel: (options: CancelBillingOptions) => Promise;\n}"
- },
- "RequireBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "RequireBillingOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "plans",
- "value": "(keyof Config[\"billing\"])[]",
- "description": "The plans to check for. Must be one of the values defined in the `billing` config option."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "onFailure",
- "value": "(error: any) => Promise",
- "description": "How to handle the request if the shop doesn't have an active payment for any plan."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isTest",
- "value": "boolean",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface RequireBillingOptions\n extends Omit {\n /**\n * The plans to check for. Must be one of the values defined in the `billing` config option.\n */\n plans: (keyof Config['billing'])[];\n /**\n * How to handle the request if the shop doesn't have an active payment for any plan.\n */\n onFailure: (error: any) => Promise;\n}"
- },
- "RequestBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "RequestBillingOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "plan",
- "value": "keyof Config[\"billing\"]",
- "description": "The plan to request. Must be one of the values defined in the `billing` config option."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isTest",
- "value": "boolean",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "returnUrl",
- "value": "string",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface RequestBillingOptions\n extends Omit {\n /**\n * The plan to request. Must be one of the values defined in the `billing` config option.\n */\n plan: keyof Config['billing'];\n}"
- },
- "CancelBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "CancelBillingOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "subscriptionId",
- "value": "string",
- "description": "The ID of the subscription to cancel."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "prorate",
- "value": "boolean",
- "description": "Whether to prorate the cancellation.\n\n\n\n\n",
- "isOptional": true
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isTest",
- "value": "boolean",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface CancelBillingOptions {\n /**\n * The ID of the subscription to cancel.\n */\n subscriptionId: string;\n /**\n * Whether to prorate the cancellation.\n *\n * {@link https://shopify.dev/docs/apps/billing/subscriptions/cancel-recurring-charges}\n */\n prorate?: boolean;\n isTest?: boolean;\n}"
- }
- },
- "jsDocExamples": true
- },
- {
- "title": "AdminApiContext",
- "description": "Components of the `admin` response object.",
- "type": "AdminApiContext",
- "typeDefinitions": {
- "AdminApiContext": {
- "filePath": "/server/config-types.ts",
- "name": "AdminApiContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "rest",
- "value": "RestClientWithResources",
- "description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
- "examples": [
- {
- "description": "Getting the number of orders in a store using REST resources",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- },
- {
- "description": "Performing a GET request to the REST API",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "graphql",
- "value": "GraphqlQueryFunction",
- "description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
- "examples": [
- {
- "description": "Creating a new product",
- "tabs": [
- {
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Getting the number of orders in a store using REST resources\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Creating a new product\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
- },
- "RestClientWithResources": {
- "filePath": "/server/clients/admin/rest.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RestClientWithResources",
- "value": "RemixRestClient & {resources: Resources}",
- "description": ""
- },
- "GraphqlQueryFunction": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "GraphqlQueryFunction",
- "description": "",
- "params": [
- {
- "name": "query",
- "description": "",
- "value": "string",
- "filePath": "/server/clients/admin/graphql.ts"
- },
- {
- "name": "options",
- "description": "",
- "value": "QueryOptions",
- "isOptional": true,
- "filePath": "/server/clients/admin/graphql.ts"
- }
- ],
- "returns": {
- "filePath": "/server/clients/admin/graphql.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type GraphqlQueryFunction = (\n query: string,\n options?: QueryOptions,\n) => Promise;"
- },
- "QueryOptions": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "variables",
- "value": "QueryVariables",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "ApiVersion",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "headers",
- "value": "{ [key: string]: any; }",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "tries",
- "value": "number",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "interface QueryOptions {\n variables?: QueryVariables;\n apiVersion?: ApiVersion;\n headers?: {[key: string]: any};\n tries?: number;\n}"
- },
- "QueryVariables": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryVariables",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "[key: string]",
- "value": "any"
- }
- ],
- "value": "interface QueryVariables {\n [key: string]: any;\n}"
- }
- },
- "jsDocExamples": true
- },
- {
- "title": "BillingContext",
- "description": "Components of the `billing` response object.",
- "type": "BillingContext",
- "typeDefinitions": {
- "BillingContext": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "BillingContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "require",
- "value": "(options: RequireBillingOptions) => Promise",
- "description": "Checks if the shop has an active payment for any plan defined in the `billing` config option.",
- "examples": [
- {
- "description": "Requesting billing right away",
- "tabs": [
- {
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n isTest: true,\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- },
- {
- "description": "Redirecting to a page where the merchant can select a plan",
- "tabs": [
- {
- "code": "import { LoaderArgs, redirect } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n isTest: true,\n onFailure: () => redirect('/select-plan'),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "request",
- "value": "(options: RequestBillingOptions) => Promise",
- "description": "Requests payment for the plan.",
- "examples": [
- {
- "description": "Requesting billing when there is no payment with a custom return URL",
- "tabs": [
- {
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({\n plan: MONTHLY_PLAN,\n isTest: true,\n returnUrl: '/billing-complete',\n }),\n });\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "cancel",
- "value": "(options: CancelBillingOptions) => Promise",
- "description": "Cancels an ongoing subscription, given its ID.",
- "examples": [
- {
- "description": "Cancelling a subscription",
- "tabs": [
- {
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n const cancelledSubscription = await billing.cancel({\n subscriptionId: subscription.id,\n isTest: true,\n prorate: true,\n });\n\n // App logic\n};",
- "title": "/app/routes/cancel-subscription.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface BillingContext {\n /**\n * Checks if the shop has an active payment for any plan defined in the `billing` config option.\n *\n * @returns A promise that resolves to an object containing the active purchases for the shop.\n *\n * @example\n * Requesting billing right away\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * isTest: true,\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * @example\n * Redirecting to a page where the merchant can select a plan\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, redirect } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n * isTest: true,\n * onFailure: () => redirect('/select-plan'),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n require: (\n options: RequireBillingOptions,\n ) => Promise;\n\n /**\n * Requests payment for the plan.\n *\n * @returns Redirects to the confirmation URL for the payment.\n *\n * @example\n * Requesting billing when there is no payment with a custom return URL\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({\n * plan: MONTHLY_PLAN,\n * isTest: true,\n * returnUrl: '/billing-complete',\n * }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n request: (options: RequestBillingOptions) => Promise;\n\n /**\n * Cancels an ongoing subscription, given its ID.\n *\n * @returns The cancelled subscription.\n *\n * @example\n * Cancelling a subscription\n * ```ts\n * // /app/routes/cancel-subscription.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * const cancelledSubscription = await billing.cancel({\n * subscriptionId: subscription.id,\n * isTest: true,\n * prorate: true,\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n cancel: (options: CancelBillingOptions) => Promise;\n}"
- },
- "RequireBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "RequireBillingOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "plans",
- "value": "(keyof Config[\"billing\"])[]",
- "description": "The plans to check for. Must be one of the values defined in the `billing` config option."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "onFailure",
- "value": "(error: any) => Promise",
- "description": "How to handle the request if the shop doesn't have an active payment for any plan."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isTest",
- "value": "boolean",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface RequireBillingOptions\n extends Omit {\n /**\n * The plans to check for. Must be one of the values defined in the `billing` config option.\n */\n plans: (keyof Config['billing'])[];\n /**\n * How to handle the request if the shop doesn't have an active payment for any plan.\n */\n onFailure: (error: any) => Promise;\n}"
- },
- "RequestBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "RequestBillingOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "plan",
- "value": "keyof Config[\"billing\"]",
- "description": "The plan to request. Must be one of the values defined in the `billing` config option."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isTest",
- "value": "boolean",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "returnUrl",
- "value": "string",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface RequestBillingOptions\n extends Omit {\n /**\n * The plan to request. Must be one of the values defined in the `billing` config option.\n */\n plan: keyof Config['billing'];\n}"
- },
- "CancelBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "CancelBillingOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "subscriptionId",
- "value": "string",
- "description": "The ID of the subscription to cancel."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "prorate",
- "value": "boolean",
- "description": "Whether to prorate the cancellation.\n\n\n\n\n",
- "isOptional": true
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isTest",
- "value": "boolean",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface CancelBillingOptions {\n /**\n * The ID of the subscription to cancel.\n */\n subscriptionId: string;\n /**\n * Whether to prorate the cancellation.\n *\n * {@link https://shopify.dev/docs/apps/billing/subscriptions/cancel-recurring-charges}\n */\n prorate?: boolean;\n isTest?: boolean;\n}"
- }
- },
- "jsDocExamples": true
- }
- ],
- "related": [
- {
- "name": "API context",
- "subtitle": "Interact with the Admin API.",
- "url": "/docs/api/shopify-app-remix/apis/admin-api"
- },
- {
- "name": "Billing context",
- "subtitle": "Bill merchants for your app using the Admin API.",
- "url": "/docs/api/shopify-app-remix/apis/billing"
- }
- ],
- "examples": {
- "description": "Usage examples",
- "exampleGroups": [
- {
- "title": "sessionToken",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Getting your app's user-specific widget data using the session token",
- "tabs": [
- {
- "title": "shopify.server.ts",
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- },
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public(\n request\n );\n return json(await getWidgets({user: sessionToken.sub}));\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "redirect",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Redirecting the user to the app's homepage",
- "tabs": [
- {
- "title": "/app/routes/admin/widgets.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\");\n};",
- "language": "typescript"
- }
- ]
- }
- },
- {
- "description": "",
- "codeblock": {
- "title": "Redirecting outside of Shopify Admin",
- "tabs": [
- {
- "title": "/app/routes/admin/widgets.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\", { target: '_parent' });\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "session",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Getting your app's shop-specific widget data using an offline session",
- "tabs": [
- {
- "title": "shopify.server.ts",
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- },
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({shop: session.shop));\n};",
- "language": "typescript"
- }
- ]
- }
- },
- {
- "description": "",
- "codeblock": {
- "title": "Getting your app's user-specific widget data using an online session",
- "tabs": [
- {
- "title": "shopify.server.ts",
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- },
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({user: session.onlineAccessInfo!.id}));\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "cors",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Setting CORS headers for a admin request",
- "tabs": [
- {
- "title": "/app/routes/admin/widgets.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getWidgets({user: session.onlineAccessInfo!.id})));\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "rest",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Getting the number of orders in a store using REST resources",
- "tabs": [
- {
- "title": "/app/shopify.server.ts",
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- },
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
- "language": "typescript"
- }
- ]
- }
- },
- {
- "description": "",
- "codeblock": {
- "title": "Performing a GET request to the REST API",
- "tabs": [
- {
- "title": "/app/shopify.server.ts",
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- },
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "graphql",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Creating a new product",
- "tabs": [
- {
- "title": "Example",
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "require",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Requesting billing right away",
- "tabs": [
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n isTest: true,\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n // App logic\n};",
- "language": "typescript"
- },
- {
- "title": "shopify.server.ts",
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- }
- ]
- }
- },
- {
- "description": "",
- "codeblock": {
- "title": "Redirecting to a page where the merchant can select a plan",
- "tabs": [
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs, redirect } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n isTest: true,\n onFailure: () => redirect('/select-plan'),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n\n // App logic\n};",
- "language": "typescript"
- },
- {
- "title": "shopify.server.ts",
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "request",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Requesting billing when there is no payment with a custom return URL",
- "tabs": [
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({\n plan: MONTHLY_PLAN,\n isTest: true,\n returnUrl: '/billing-complete',\n }),\n });\n\n // App logic\n};",
- "language": "typescript"
- },
- {
- "title": "shopify.server.ts",
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "cancel",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Cancelling a subscription",
- "tabs": [
- {
- "title": "/app/routes/cancel-subscription.ts",
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n const cancelledSubscription = await billing.cancel({\n subscriptionId: subscription.id,\n isTest: true,\n prorate: true,\n });\n\n // App logic\n};",
- "language": "typescript"
- },
- {
- "title": "shopify.server.ts",
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- }
- ]
- }
- },
- {
- "name": "App proxy",
- "description": "The `authenticate.public.appProxy` function validates app proxy requests made by Shopify, and returns a context to enable querying Shopify APIs.",
- "category": "Authenticate",
- "subCategory": "Public",
- "type": "object",
- "isVisualComponent": false,
- "definitions": [
- {
- "title": "authenticate.public.appProxy",
- "description": "Authenticates requests coming from Shopify app proxies.",
- "type": "AuthenticateAppProxy",
- "typeDefinitions": {
- "AuthenticateAppProxy": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "AuthenticateAppProxy",
- "description": "",
- "params": [
- {
- "name": "request",
- "description": "",
- "value": "Request",
- "filePath": "/server/authenticate/public/appProxy/types.ts"
- }
- ],
- "returns": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type AuthenticateAppProxy = (\n request: Request,\n) => Promise;"
- },
- "AppProxyContext": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "AppProxyContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "undefined",
- "description": "No session is available for the shop that made this request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice."
- },
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "undefined",
- "description": "No session is available for the shop that made this request.Therefore no methods for interacting with the GraphQL / REST Admin APIs are available."
- },
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "liquid",
- "value": "LiquidResponseFunction",
- "description": "A utility for creating a Liquid Response.",
- "examples": [
- {
- "description": "Returning a Liquid Response from an app proxy route",
- "tabs": [
- {
- "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
- "title": "app/routes/**\\/.ts"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AppProxyContext extends Context {\n /**\n * No session is available for the shop that made this request.\n *\n * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n */\n session: undefined;\n\n /**\n * No session is available for the shop that made this request.\n * Therefore no methods for interacting with the GraphQL / REST Admin APIs are available.\n */\n admin: undefined;\n}"
- },
- "LiquidResponseFunction": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "LiquidResponseFunction",
- "description": "",
- "params": [
- {
- "name": "body",
- "description": "",
- "value": "string",
- "filePath": "/server/authenticate/public/appProxy/types.ts"
- },
- {
- "name": "initAndOptions",
- "description": "",
- "value": "number | (ResponseInit & Options)",
- "isOptional": true,
- "filePath": "/server/authenticate/public/appProxy/types.ts"
- }
- ],
- "returns": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "description": "",
- "name": "Response",
- "value": "Response"
- },
- "value": "export type LiquidResponseFunction = (\n body: string,\n initAndOptions?: number | (ResponseInit & Options),\n) => Response;"
- },
- "Options": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "Options",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "layout",
- "value": "boolean",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "interface Options {\n layout?: boolean;\n}"
- },
- "AppProxyContextWithSession": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "AppProxyContextWithSession",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": "The session for the shop that made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
- "examples": [
- {
- "description": "Getting your app's shop specific widget data using an offline session",
- "tabs": [
- {
- "code": "import { json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }) => {\n const { session } = await authenticate.public.appProxy(request);\n return json(await getWidgets({shop: session.shop));\n};",
- "title": "app/routes/**\\/.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "AdminApiContext",
- "description": "Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request."
- },
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "liquid",
- "value": "LiquidResponseFunction",
- "description": "A utility for creating a Liquid Response.",
- "examples": [
- {
- "description": "Returning a Liquid Response from an app proxy route",
- "tabs": [
- {
- "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
- "title": "app/routes/**\\/.ts"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AppProxyContextWithSession<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends Context {\n /**\n * The session for the shop that made the request.\n *\n * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n *\n * Use this to get shop or user-specific data.\n *\n * @example\n * Getting your app's shop specific widget data using an offline session\n * ```ts\n * // app/routes/**\\/.ts\n * import { json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }) => {\n * const { session } = await authenticate.public.appProxy(request);\n * return json(await getWidgets({shop: session.shop));\n * };\n * ```\n */\n session: Session;\n\n /**\n * Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.\n */\n admin: AdminApiContext;\n}"
- },
- "AdminApiContext": {
- "filePath": "/server/config-types.ts",
- "name": "AdminApiContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "rest",
- "value": "RestClientWithResources",
- "description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
- "examples": [
- {
- "description": "Getting the number of orders in a store using REST resources",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- },
- {
- "description": "Performing a GET request to the REST API",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "graphql",
- "value": "GraphqlQueryFunction",
- "description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
- "examples": [
- {
- "description": "Creating a new product",
- "tabs": [
- {
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Getting the number of orders in a store using REST resources\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Creating a new product\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
- },
- "RestClientWithResources": {
- "filePath": "/server/clients/admin/rest.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RestClientWithResources",
- "value": "RemixRestClient & {resources: Resources}",
- "description": ""
- },
- "GraphqlQueryFunction": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "GraphqlQueryFunction",
- "description": "",
- "params": [
- {
- "name": "query",
- "description": "",
- "value": "string",
- "filePath": "/server/clients/admin/graphql.ts"
- },
- {
- "name": "options",
- "description": "",
- "value": "QueryOptions",
- "isOptional": true,
- "filePath": "/server/clients/admin/graphql.ts"
- }
- ],
- "returns": {
- "filePath": "/server/clients/admin/graphql.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type GraphqlQueryFunction = (\n query: string,\n options?: QueryOptions,\n) => Promise;"
- },
- "QueryOptions": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "variables",
- "value": "QueryVariables",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "ApiVersion",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "headers",
- "value": "{ [key: string]: any; }",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "tries",
- "value": "number",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "interface QueryOptions {\n variables?: QueryVariables;\n apiVersion?: ApiVersion;\n headers?: {[key: string]: any};\n tries?: number;\n}"
- },
- "QueryVariables": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryVariables",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "[key: string]",
- "value": "any"
- }
- ],
- "value": "interface QueryVariables {\n [key: string]: any;\n}"
- }
- },
- "jsDocExamples": false
- },
- {
- "title": "AppProxyContext",
- "description": "Object returned by `authenticate.public.appProxy`.",
- "type": "AppProxyContextWithSession",
- "typeDefinitions": {
- "AppProxyContextWithSession": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "AppProxyContextWithSession",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": "The session for the shop that made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
- "examples": [
- {
- "description": "Getting your app's shop specific widget data using an offline session",
- "tabs": [
- {
- "code": "import { json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }) => {\n const { session } = await authenticate.public.appProxy(request);\n return json(await getWidgets({shop: session.shop));\n};",
- "title": "app/routes/**\\/.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "AdminApiContext",
- "description": "Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request."
- },
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "liquid",
- "value": "LiquidResponseFunction",
- "description": "A utility for creating a Liquid Response.",
- "examples": [
- {
- "description": "Returning a Liquid Response from an app proxy route",
- "tabs": [
- {
- "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
- "title": "app/routes/**\\/.ts"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AppProxyContextWithSession<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends Context {\n /**\n * The session for the shop that made the request.\n *\n * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n *\n * Use this to get shop or user-specific data.\n *\n * @example\n * Getting your app's shop specific widget data using an offline session\n * ```ts\n * // app/routes/**\\/.ts\n * import { json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }) => {\n * const { session } = await authenticate.public.appProxy(request);\n * return json(await getWidgets({shop: session.shop));\n * };\n * ```\n */\n session: Session;\n\n /**\n * Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.\n */\n admin: AdminApiContext;\n}"
- },
- "AdminApiContext": {
- "filePath": "/server/config-types.ts",
- "name": "AdminApiContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "rest",
- "value": "RestClientWithResources",
- "description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
- "examples": [
- {
- "description": "Getting the number of orders in a store using REST resources",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- },
- {
- "description": "Performing a GET request to the REST API",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "graphql",
- "value": "GraphqlQueryFunction",
- "description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
- "examples": [
- {
- "description": "Creating a new product",
- "tabs": [
- {
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Getting the number of orders in a store using REST resources\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Creating a new product\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
- },
- "RestClientWithResources": {
- "filePath": "/server/clients/admin/rest.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RestClientWithResources",
- "value": "RemixRestClient & {resources: Resources}",
- "description": ""
- },
- "GraphqlQueryFunction": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "GraphqlQueryFunction",
- "description": "",
- "params": [
- {
- "name": "query",
- "description": "",
- "value": "string",
- "filePath": "/server/clients/admin/graphql.ts"
- },
- {
- "name": "options",
- "description": "",
- "value": "QueryOptions",
- "isOptional": true,
- "filePath": "/server/clients/admin/graphql.ts"
- }
- ],
- "returns": {
- "filePath": "/server/clients/admin/graphql.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type GraphqlQueryFunction = (\n query: string,\n options?: QueryOptions,\n) => Promise;"
- },
- "QueryOptions": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "variables",
- "value": "QueryVariables",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "ApiVersion",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "headers",
- "value": "{ [key: string]: any; }",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "tries",
- "value": "number",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "interface QueryOptions {\n variables?: QueryVariables;\n apiVersion?: ApiVersion;\n headers?: {[key: string]: any};\n tries?: number;\n}"
- },
- "QueryVariables": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryVariables",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "[key: string]",
- "value": "any"
- }
- ],
- "value": "interface QueryVariables {\n [key: string]: any;\n}"
- },
- "LiquidResponseFunction": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "LiquidResponseFunction",
- "description": "",
- "params": [
- {
- "name": "body",
- "description": "",
- "value": "string",
- "filePath": "/server/authenticate/public/appProxy/types.ts"
- },
- {
- "name": "initAndOptions",
- "description": "",
- "value": "number | (ResponseInit & Options)",
- "isOptional": true,
- "filePath": "/server/authenticate/public/appProxy/types.ts"
- }
- ],
- "returns": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "description": "",
- "name": "Response",
- "value": "Response"
- },
- "value": "export type LiquidResponseFunction = (\n body: string,\n initAndOptions?: number | (ResponseInit & Options),\n) => Response;"
- },
- "Options": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "Options",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "layout",
- "value": "boolean",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "interface Options {\n layout?: boolean;\n}"
- }
- },
- "jsDocExamples": true
- },
- {
- "title": "AdminApiContext",
- "description": "Object returned by `authenticate.public.appProxy`.",
- "type": "AdminApiContext",
- "typeDefinitions": {
- "AdminApiContext": {
- "filePath": "/server/config-types.ts",
- "name": "AdminApiContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "rest",
- "value": "RestClientWithResources",
- "description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
- "examples": [
- {
- "description": "Getting the number of orders in a store using REST resources",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- },
- {
- "description": "Performing a GET request to the REST API",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "graphql",
- "value": "GraphqlQueryFunction",
- "description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
- "examples": [
- {
- "description": "Creating a new product",
- "tabs": [
- {
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Getting the number of orders in a store using REST resources\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Creating a new product\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
- },
- "RestClientWithResources": {
- "filePath": "/server/clients/admin/rest.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RestClientWithResources",
- "value": "RemixRestClient & {resources: Resources}",
- "description": ""
- },
- "GraphqlQueryFunction": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "GraphqlQueryFunction",
- "description": "",
- "params": [
- {
- "name": "query",
- "description": "",
- "value": "string",
- "filePath": "/server/clients/admin/graphql.ts"
- },
- {
- "name": "options",
- "description": "",
- "value": "QueryOptions",
- "isOptional": true,
- "filePath": "/server/clients/admin/graphql.ts"
- }
- ],
- "returns": {
- "filePath": "/server/clients/admin/graphql.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type GraphqlQueryFunction = (\n query: string,\n options?: QueryOptions,\n) => Promise;"
- },
- "QueryOptions": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "variables",
- "value": "QueryVariables",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "ApiVersion",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "headers",
- "value": "{ [key: string]: any; }",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "tries",
- "value": "number",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "interface QueryOptions {\n variables?: QueryVariables;\n apiVersion?: ApiVersion;\n headers?: {[key: string]: any};\n tries?: number;\n}"
- },
- "QueryVariables": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryVariables",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "[key: string]",
- "value": "any"
- }
- ],
- "value": "interface QueryVariables {\n [key: string]: any;\n}"
- }
- },
- "jsDocExamples": true
- }
- ],
- "related": [
- {
- "name": "API context",
- "subtitle": "Interact with the Admin API.",
- "url": "/docs/api/shopify-app-remix/apis/admin-api"
- }
- ],
- "examples": {
- "description": "Usage examples",
- "exampleGroups": [
- {
- "title": "session",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Getting your app's shop specific widget data using an offline session",
- "tabs": [
- {
- "title": "app/routes/**\\/.ts",
- "code": "import { json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }) => {\n const { session } = await authenticate.public.appProxy(request);\n return json(await getWidgets({shop: session.shop));\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "liquid",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Returning a Liquid Response from an app proxy route",
- "tabs": [
- {
- "title": "app/routes/**\\/.ts",
- "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "rest",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Getting the number of orders in a store using REST resources",
- "tabs": [
- {
- "title": "/app/shopify.server.ts",
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- },
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
- "language": "typescript"
- }
- ]
- }
- },
- {
- "description": "",
- "codeblock": {
- "title": "Performing a GET request to the REST API",
- "tabs": [
- {
- "title": "/app/shopify.server.ts",
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "language": "typescript"
- },
- {
- "title": "/app/routes/**\\/*.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "graphql",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Creating a new product",
- "tabs": [
- {
- "title": "Example",
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- }
- ]
- }
- },
- {
- "name": "Checkout",
- "description": "The `authenticate.public.checkout` function ensures that checkout extension requests are coming from Shopify, and returns helpers to respond with the correct headers.",
- "category": "Authenticate",
- "subCategory": "Public",
- "type": "object",
- "isVisualComponent": false,
- "definitions": [
- {
- "title": "authenticate.public.checkout",
- "description": "Authenticates requests coming from Shopify checkout extensions.",
- "type": "AuthenticateCheckout",
- "typeDefinitions": {
- "AuthenticateCheckout": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "name": "AuthenticateCheckout",
- "description": "",
- "params": [
- {
- "name": "request",
- "description": "",
- "value": "Request",
- "filePath": "/server/authenticate/public/checkout/types.ts"
- },
- {
- "name": "options",
- "description": "",
- "value": "AuthenticateCheckoutOptions",
- "isOptional": true,
- "filePath": "/server/authenticate/public/checkout/types.ts"
- }
- ],
- "returns": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type AuthenticateCheckout = (\n request: Request,\n options?: AuthenticateCheckoutOptions,\n) => Promise;"
- },
- "AuthenticateCheckoutOptions": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "name": "AuthenticateCheckoutOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "corsHeaders",
- "value": "string[]",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface AuthenticateCheckoutOptions {\n corsHeaders?: string[];\n}"
- },
- "CheckoutContext": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "name": "CheckoutContext",
- "description": "Authenticated Context for a checkout request",
- "members": [
- {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "sessionToken",
- "value": "JwtPayload",
- "description": "The decoded and validated session token for the request\n\nRefer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).",
- "examples": [
- {
- "description": "Get store specific widget data using the session token",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public(\n request\n );\n return json(await getWidgets({shop: sessionToken.dest}));\n};",
- "title": "app/routes/public/widgets.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "cors",
- "value": "EnsureCORSFunction",
- "description": "A function that ensures the CORS headers are set correctly for the response.",
- "examples": [
- {
- "description": "Setting CORS headers for a public request",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken, cors } = await authenticate.public(\n request,\n { corsHeaders: [\"X-My-Custom-Header\"] }\n );\n const widgets = await getWidgets({shop: sessionToken.dest});\n return cors(json(widgets));\n};",
- "title": "app/routes/public/widgets.ts"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface CheckoutContext {\n /**\n * The decoded and validated session token for the request\n *\n * Refer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).\n *\n * @example\n * Get store specific widget data using the session token\n * ```ts\n * // app/routes/public/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken } = await authenticate.public(\n * request\n * );\n * return json(await getWidgets({shop: sessionToken.dest}));\n * };\n * ```\n */\n sessionToken: JwtPayload;\n\n /**\n * A function that ensures the CORS headers are set correctly for the response.\n *\n * @example\n * Setting CORS headers for a public request\n * ```ts\n * // app/routes/public/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken, cors } = await authenticate.public(\n * request,\n * { corsHeaders: [\"X-My-Custom-Header\"] }\n * );\n * const widgets = await getWidgets({shop: sessionToken.dest});\n * return cors(json(widgets));\n * };\n * ```\n */\n cors: EnsureCORSFunction;\n}"
- }
- },
- "jsDocExamples": false
- },
- {
- "title": "CheckoutContext",
- "description": "Object returned by `authenticate.public.checkout`.",
- "type": "CheckoutContext",
- "typeDefinitions": {
- "CheckoutContext": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "name": "CheckoutContext",
- "description": "Authenticated Context for a checkout request",
- "members": [
- {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "sessionToken",
- "value": "JwtPayload",
- "description": "The decoded and validated session token for the request\n\nRefer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).",
- "examples": [
- {
- "description": "Get store specific widget data using the session token",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public(\n request\n );\n return json(await getWidgets({shop: sessionToken.dest}));\n};",
- "title": "app/routes/public/widgets.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "cors",
- "value": "EnsureCORSFunction",
- "description": "A function that ensures the CORS headers are set correctly for the response.",
- "examples": [
- {
- "description": "Setting CORS headers for a public request",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken, cors } = await authenticate.public(\n request,\n { corsHeaders: [\"X-My-Custom-Header\"] }\n );\n const widgets = await getWidgets({shop: sessionToken.dest});\n return cors(json(widgets));\n};",
- "title": "app/routes/public/widgets.ts"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface CheckoutContext {\n /**\n * The decoded and validated session token for the request\n *\n * Refer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).\n *\n * @example\n * Get store specific widget data using the session token\n * ```ts\n * // app/routes/public/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken } = await authenticate.public(\n * request\n * );\n * return json(await getWidgets({shop: sessionToken.dest}));\n * };\n * ```\n */\n sessionToken: JwtPayload;\n\n /**\n * A function that ensures the CORS headers are set correctly for the response.\n *\n * @example\n * Setting CORS headers for a public request\n * ```ts\n * // app/routes/public/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken, cors } = await authenticate.public(\n * request,\n * { corsHeaders: [\"X-My-Custom-Header\"] }\n * );\n * const widgets = await getWidgets({shop: sessionToken.dest});\n * return cors(json(widgets));\n * };\n * ```\n */\n cors: EnsureCORSFunction;\n}"
- }
- },
- "jsDocExamples": true
- }
- ],
- "related": [],
- "examples": {
- "description": "Usage examples",
- "exampleGroups": [
- {
- "title": "sessionToken",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Get store specific widget data using the session token",
- "tabs": [
- {
- "title": "app/routes/public/widgets.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public(\n request\n );\n return json(await getWidgets({shop: sessionToken.dest}));\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "cors",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Setting CORS headers for a public request",
- "tabs": [
- {
- "title": "app/routes/public/widgets.ts",
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken, cors } = await authenticate.public(\n request,\n { corsHeaders: [\"X-My-Custom-Header\"] }\n );\n const widgets = await getWidgets({shop: sessionToken.dest});\n return cors(json(widgets));\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- }
- ]
- }
- },
- {
- "name": "Webhook",
- "description": "Contains functions for verifying Shopify webhooks.",
- "category": "Authenticate",
- "type": "object",
- "isVisualComponent": false,
- "definitions": [
- {
- "title": "authenticate.webhook",
- "description": "Verifies requests coming from Shopify webhooks.",
- "type": "AuthenticateWebhook",
- "typeDefinitions": {
- "AuthenticateWebhook": {
- "filePath": "/server/types.ts",
- "name": "AuthenticateWebhook",
- "description": "",
- "params": [
- {
- "name": "request",
- "description": "",
- "value": "Request",
- "filePath": "/server/types.ts"
- }
- ],
- "returns": {
- "filePath": "/server/types.ts",
- "description": "",
- "name": "Promise<\n WebhookContext | WebhookContextWithSession\n>",
- "value": "Promise<\n WebhookContext | WebhookContextWithSession\n>"
- },
- "value": "type AuthenticateWebhook<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n Topics = string | number | symbol,\n> = (\n request: Request,\n) => Promise<\n WebhookContext | WebhookContextWithSession\n>;"
- },
- "WebhookContext": {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "name": "WebhookContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "undefined",
- "description": ""
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "undefined",
- "description": ""
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "string",
- "description": "The API version used for the webhook.",
- "examples": [
- {
- "description": "Get API version used for webhook request.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { apiVersion } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "shop",
- "value": "string",
- "description": "The shop where the webhook was triggered.",
- "examples": [
- {
- "description": "Get the shop that triggered a webhook.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { shop } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "topic",
- "value": "Topics",
- "description": "The topic of the webhook.",
- "examples": [
- {
- "description": "Get the webhook topic.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { topic } = await authenticate.webhook(request);\n\n switch (topic) {\n case \"APP_UNINSTALLED\":\n // Do something when the app is uninstalled.\n break;\n }\n\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "webhookId",
- "value": "string",
- "description": "A unique ID for the webhook. Useful to keep track of which events your app has already processed.",
- "examples": [
- {
- "description": "Get the webhook ID.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { webhookId } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "payload",
- "value": "JSONValue",
- "description": "The payload from the webhook request.",
- "examples": [
- {
- "description": "Get the request's POST payload.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { payload } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface WebhookContext\n extends Context {\n session: undefined;\n admin: undefined;\n}"
- },
- "JSONValue": {
- "filePath": "/server/types.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "JSONValue",
- "value": "string | number | boolean | null | JSONObject | JSONArray",
- "description": ""
- },
- "JSONObject": {
- "filePath": "/server/types.ts",
- "name": "JSONObject",
- "description": "",
- "members": [
- {
- "filePath": "/server/types.ts",
- "name": "[x: string]",
- "value": "JSONValue"
- }
- ],
- "value": "interface JSONObject {\n [x: string]: JSONValue;\n}"
- },
- "JSONArray": {
- "filePath": "/server/types.ts",
- "name": "JSONArray",
- "description": "",
- "members": [
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "length",
- "value": "number",
- "description": "Gets or sets the length of the array. This is a number one higher than the highest index in the array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "toString",
- "value": "() => string",
- "description": "Returns a string representation of an array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "toLocaleString",
- "value": "() => string",
- "description": "Returns a string representation of an array. The elements are converted to string using their toLocaleString methods."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "pop",
- "value": "() => JSONValue",
- "description": "Removes the last element from an array and returns it.\r\nIf the array is empty, undefined is returned and the array is not modified."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "push",
- "value": "(...items: JSONValue[]) => number",
- "description": "Appends new elements to the end of an array, and returns the new length of the array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "concat",
- "value": "{ (...items: ConcatArray[]): JSONValue[]; (...items: (JSONValue | ConcatArray)[]): JSONValue[]; }",
- "description": "Combines two or more arrays.\r\nThis method returns a new array without modifying any existing arrays."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "join",
- "value": "(separator?: string) => string",
- "description": "Adds all the elements of an array into a string, separated by the specified separator string."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "reverse",
- "value": "() => JSONValue[]",
- "description": "Reverses the elements in an array in place.\r\nThis method mutates the array and returns a reference to the same array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "shift",
- "value": "() => JSONValue",
- "description": "Removes the first element from an array and returns it.\r\nIf the array is empty, undefined is returned and the array is not modified."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "slice",
- "value": "(start?: number, end?: number) => JSONValue[]",
- "description": "Returns a copy of a section of an array.\r\nFor both start and end, a negative index can be used to indicate an offset from the end of the array.\r\nFor example, -2 refers to the second to last element of the array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "sort",
- "value": "(compareFn?: (a: JSONValue, b: JSONValue) => number) => JSONArray",
- "description": "Sorts an array in place.\r\nThis method mutates the array and returns a reference to the same array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "splice",
- "value": "{ (start: number, deleteCount?: number): JSONValue[]; (start: number, deleteCount: number, ...items: JSONValue[]): JSONValue[]; }",
- "description": "Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "unshift",
- "value": "(...items: JSONValue[]) => number",
- "description": "Inserts new elements at the start of an array, and returns the new length of the array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "indexOf",
- "value": "(searchElement: JSONValue, fromIndex?: number) => number",
- "description": "Returns the index of the first occurrence of a value in an array, or -1 if it is not present."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "lastIndexOf",
- "value": "(searchElement: JSONValue, fromIndex?: number) => number",
- "description": "Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "every",
- "value": "{ (predicate: (value: JSONValue, index: number, array: JSONValue[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: JSONValue, index: number, array: JSONValue[]) => unknown, thisArg?: any): boolean; }",
- "description": "Determines whether all the members of an array satisfy the specified test."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "some",
- "value": "(predicate: (value: JSONValue, index: number, array: JSONValue[]) => unknown, thisArg?: any) => boolean",
- "description": "Determines whether the specified callback function returns true for any element of an array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "forEach",
- "value": "(callbackfn: (value: JSONValue, index: number, array: JSONValue[]) => void, thisArg?: any) => void",
- "description": "Performs the specified action for each element in an array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "map",
- "value": "(callbackfn: (value: JSONValue, index: number, array: JSONValue[]) => U, thisArg?: any) => U[]",
- "description": "Calls a defined callback function on each element of an array, and returns an array that contains the results."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "filter",
- "value": "{ (predicate: (value: JSONValue, index: number, array: JSONValue[]) => value is S, thisArg?: any): S[]; (predicate: (value: JSONValue, index: number, array: JSONValue[]) => unknown, thisArg?: any): JSONValue[]; }",
- "description": "Returns the elements of an array that meet the condition specified in a callback function."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "reduce",
- "value": "{ (callbackfn: (previousValue: JSONValue, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => JSONValue): JSONValue; (callbackfn: (previousValue: JSONValue, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => JSONValue, initialValue: JSONValue): JSONValue; (callbackfn: (previousValue: U, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => U, initialValue: U): U; }",
- "description": "Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "reduceRight",
- "value": "{ (callbackfn: (previousValue: JSONValue, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => JSONValue): JSONValue; (callbackfn: (previousValue: JSONValue, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => JSONValue, initialValue: JSONValue): JSONValue; (callbackfn: (previousValue: U, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => U, initialValue: U): U; }",
- "description": "Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "find",
- "value": "{ (predicate: (this: void, value: JSONValue, index: number, obj: JSONValue[]) => value is S, thisArg?: any): S; (predicate: (value: JSONValue, index: number, obj: JSONValue[]) => unknown, thisArg?: any): JSONValue; }",
- "description": "Returns the value of the first element in the array where predicate is true, and undefined\r\notherwise."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "findIndex",
- "value": "(predicate: (value: JSONValue, index: number, obj: JSONValue[]) => unknown, thisArg?: any) => number",
- "description": "Returns the index of the first element in the array where predicate is true, and -1\r\notherwise."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "fill",
- "value": "(value: JSONValue, start?: number, end?: number) => JSONArray",
- "description": "Changes all array elements from `start` to `end` index to a static `value` and returns the modified array"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "copyWithin",
- "value": "(target: number, start: number, end?: number) => JSONArray",
- "description": "Returns the this object after copying a section of the array identified by start and end\r\nto the same array starting at position target"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "entries",
- "value": "() => IterableIterator<[number, JSONValue]>",
- "description": "Returns an iterable of key, value pairs for every entry in the array"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "keys",
- "value": "() => IterableIterator",
- "description": "Returns an iterable of keys in the array"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "values",
- "value": "() => IterableIterator",
- "description": "Returns an iterable of values in the array"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "includes",
- "value": "(searchElement: JSONValue, fromIndex?: number) => boolean",
- "description": "Determines whether an array includes a certain element, returning true or false as appropriate."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "flatMap",
- "value": "(callback: (this: This, value: JSONValue, index: number, array: JSONValue[]) => U | readonly U[], thisArg?: This) => U[]",
- "description": "Calls a defined callback function on each element of an array. Then, flattens the result into\r\na new array.\r\nThis is identical to a map followed by flat with depth 1."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "flat",
- "value": "(this: A, depth?: D) => FlatArray[]",
- "description": "Returns a new array with all sub-array elements concatenated into it recursively up to the\r\nspecified depth."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "__@iterator@386",
- "value": "() => IterableIterator",
- "description": "Iterator"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "__@unscopables@388",
- "value": "() => { copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: boolean; values: boolean; }",
- "description": "Returns an object whose properties have the value 'true'\r\nwhen they will be absent when used in a 'with' statement."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "at",
- "value": "(index: number) => JSONValue",
- "description": "Takes an integer value and returns the item at that index,allowing for positive and negative integers.Negative integers count back from the last item in the array."
- }
- ],
- "value": "interface JSONArray extends Array {}"
- },
- "WebhookContextWithSession": {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "name": "WebhookContextWithSession",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": "A session with an offline token for the shop.\n\nReturned only if there is a session for the shop."
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "{ rest: RestClient & Resources; graphql: GraphqlClient; }",
- "description": "An admin context for the webhook.\n\nReturned only if there is a session for the shop."
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "string",
- "description": "The API version used for the webhook.",
- "examples": [
- {
- "description": "Get API version used for webhook request.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { apiVersion } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "shop",
- "value": "string",
- "description": "The shop where the webhook was triggered.",
- "examples": [
- {
- "description": "Get the shop that triggered a webhook.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { shop } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "topic",
- "value": "Topics",
- "description": "The topic of the webhook.",
- "examples": [
- {
- "description": "Get the webhook topic.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { topic } = await authenticate.webhook(request);\n\n switch (topic) {\n case \"APP_UNINSTALLED\":\n // Do something when the app is uninstalled.\n break;\n }\n\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "webhookId",
- "value": "string",
- "description": "A unique ID for the webhook. Useful to keep track of which events your app has already processed.",
- "examples": [
- {
- "description": "Get the webhook ID.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { webhookId } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "payload",
- "value": "JSONValue",
- "description": "The payload from the webhook request.",
- "examples": [
- {
- "description": "Get the request's POST payload.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { payload } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface WebhookContextWithSession<\n Topics = string | number | symbol,\n Resources extends ShopifyRestResources = any,\n> extends Context {\n /**\n * A session with an offline token for the shop.\n *\n * Returned only if there is a session for the shop.\n */\n session: Session;\n /**\n * An admin context for the webhook.\n *\n * Returned only if there is a session for the shop.\n */\n admin: {\n /** A REST client. */\n rest: InstanceType & Resources;\n /** A GraphQL client. */\n graphql: InstanceType;\n };\n}"
- }
- },
- "jsDocExamples": false
- },
- {
- "title": "WebhookContext",
- "description": "Object returned by `authenticate.webhook`.",
- "type": "WebhookContextWithSession",
- "typeDefinitions": {
- "WebhookContextWithSession": {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "name": "WebhookContextWithSession",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": "A session with an offline token for the shop.\n\nReturned only if there is a session for the shop."
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "{ rest: RestClient & Resources; graphql: GraphqlClient; }",
- "description": "An admin context for the webhook.\n\nReturned only if there is a session for the shop."
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "string",
- "description": "The API version used for the webhook.",
- "examples": [
- {
- "description": "Get API version used for webhook request.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { apiVersion } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "shop",
- "value": "string",
- "description": "The shop where the webhook was triggered.",
- "examples": [
- {
- "description": "Get the shop that triggered a webhook.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { shop } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "topic",
- "value": "Topics",
- "description": "The topic of the webhook.",
- "examples": [
- {
- "description": "Get the webhook topic.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { topic } = await authenticate.webhook(request);\n\n switch (topic) {\n case \"APP_UNINSTALLED\":\n // Do something when the app is uninstalled.\n break;\n }\n\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "webhookId",
- "value": "string",
- "description": "A unique ID for the webhook. Useful to keep track of which events your app has already processed.",
- "examples": [
- {
- "description": "Get the webhook ID.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { webhookId } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "payload",
- "value": "JSONValue",
- "description": "The payload from the webhook request.",
- "examples": [
- {
- "description": "Get the request's POST payload.",
- "tabs": [
- {
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { payload } = await authenticate.webhook(request);\n return new Response();\n};",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface WebhookContextWithSession<\n Topics = string | number | symbol,\n Resources extends ShopifyRestResources = any,\n> extends Context {\n /**\n * A session with an offline token for the shop.\n *\n * Returned only if there is a session for the shop.\n */\n session: Session;\n /**\n * An admin context for the webhook.\n *\n * Returned only if there is a session for the shop.\n */\n admin: {\n /** A REST client. */\n rest: InstanceType & Resources;\n /** A GraphQL client. */\n graphql: InstanceType;\n };\n}"
- },
- "JSONValue": {
- "filePath": "/server/types.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "JSONValue",
- "value": "string | number | boolean | null | JSONObject | JSONArray",
- "description": ""
- },
- "JSONObject": {
- "filePath": "/server/types.ts",
- "name": "JSONObject",
- "description": "",
- "members": [
- {
- "filePath": "/server/types.ts",
- "name": "[x: string]",
- "value": "JSONValue"
- }
- ],
- "value": "interface JSONObject {\n [x: string]: JSONValue;\n}"
- },
- "JSONArray": {
- "filePath": "/server/types.ts",
- "name": "JSONArray",
- "description": "",
- "members": [
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "length",
- "value": "number",
- "description": "Gets or sets the length of the array. This is a number one higher than the highest index in the array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "toString",
- "value": "() => string",
- "description": "Returns a string representation of an array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "toLocaleString",
- "value": "() => string",
- "description": "Returns a string representation of an array. The elements are converted to string using their toLocaleString methods."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "pop",
- "value": "() => JSONValue",
- "description": "Removes the last element from an array and returns it.\r\nIf the array is empty, undefined is returned and the array is not modified."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "push",
- "value": "(...items: JSONValue[]) => number",
- "description": "Appends new elements to the end of an array, and returns the new length of the array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "concat",
- "value": "{ (...items: ConcatArray[]): JSONValue[]; (...items: (JSONValue | ConcatArray)[]): JSONValue[]; }",
- "description": "Combines two or more arrays.\r\nThis method returns a new array without modifying any existing arrays."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "join",
- "value": "(separator?: string) => string",
- "description": "Adds all the elements of an array into a string, separated by the specified separator string."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "reverse",
- "value": "() => JSONValue[]",
- "description": "Reverses the elements in an array in place.\r\nThis method mutates the array and returns a reference to the same array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "shift",
- "value": "() => JSONValue",
- "description": "Removes the first element from an array and returns it.\r\nIf the array is empty, undefined is returned and the array is not modified."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "slice",
- "value": "(start?: number, end?: number) => JSONValue[]",
- "description": "Returns a copy of a section of an array.\r\nFor both start and end, a negative index can be used to indicate an offset from the end of the array.\r\nFor example, -2 refers to the second to last element of the array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "sort",
- "value": "(compareFn?: (a: JSONValue, b: JSONValue) => number) => JSONArray",
- "description": "Sorts an array in place.\r\nThis method mutates the array and returns a reference to the same array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "splice",
- "value": "{ (start: number, deleteCount?: number): JSONValue[]; (start: number, deleteCount: number, ...items: JSONValue[]): JSONValue[]; }",
- "description": "Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "unshift",
- "value": "(...items: JSONValue[]) => number",
- "description": "Inserts new elements at the start of an array, and returns the new length of the array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "indexOf",
- "value": "(searchElement: JSONValue, fromIndex?: number) => number",
- "description": "Returns the index of the first occurrence of a value in an array, or -1 if it is not present."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "lastIndexOf",
- "value": "(searchElement: JSONValue, fromIndex?: number) => number",
- "description": "Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "every",
- "value": "{ (predicate: (value: JSONValue, index: number, array: JSONValue[]) => value is S, thisArg?: any): this is S[]; (predicate: (value: JSONValue, index: number, array: JSONValue[]) => unknown, thisArg?: any): boolean; }",
- "description": "Determines whether all the members of an array satisfy the specified test."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "some",
- "value": "(predicate: (value: JSONValue, index: number, array: JSONValue[]) => unknown, thisArg?: any) => boolean",
- "description": "Determines whether the specified callback function returns true for any element of an array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "forEach",
- "value": "(callbackfn: (value: JSONValue, index: number, array: JSONValue[]) => void, thisArg?: any) => void",
- "description": "Performs the specified action for each element in an array."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "map",
- "value": "(callbackfn: (value: JSONValue, index: number, array: JSONValue[]) => U, thisArg?: any) => U[]",
- "description": "Calls a defined callback function on each element of an array, and returns an array that contains the results."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "filter",
- "value": "{ (predicate: (value: JSONValue, index: number, array: JSONValue[]) => value is S, thisArg?: any): S[]; (predicate: (value: JSONValue, index: number, array: JSONValue[]) => unknown, thisArg?: any): JSONValue[]; }",
- "description": "Returns the elements of an array that meet the condition specified in a callback function."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "reduce",
- "value": "{ (callbackfn: (previousValue: JSONValue, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => JSONValue): JSONValue; (callbackfn: (previousValue: JSONValue, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => JSONValue, initialValue: JSONValue): JSONValue; (callbackfn: (previousValue: U, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => U, initialValue: U): U; }",
- "description": "Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "reduceRight",
- "value": "{ (callbackfn: (previousValue: JSONValue, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => JSONValue): JSONValue; (callbackfn: (previousValue: JSONValue, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => JSONValue, initialValue: JSONValue): JSONValue; (callbackfn: (previousValue: U, currentValue: JSONValue, currentIndex: number, array: JSONValue[]) => U, initialValue: U): U; }",
- "description": "Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "find",
- "value": "{ (predicate: (this: void, value: JSONValue, index: number, obj: JSONValue[]) => value is S, thisArg?: any): S; (predicate: (value: JSONValue, index: number, obj: JSONValue[]) => unknown, thisArg?: any): JSONValue; }",
- "description": "Returns the value of the first element in the array where predicate is true, and undefined\r\notherwise."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "findIndex",
- "value": "(predicate: (value: JSONValue, index: number, obj: JSONValue[]) => unknown, thisArg?: any) => number",
- "description": "Returns the index of the first element in the array where predicate is true, and -1\r\notherwise."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "fill",
- "value": "(value: JSONValue, start?: number, end?: number) => JSONArray",
- "description": "Changes all array elements from `start` to `end` index to a static `value` and returns the modified array"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "copyWithin",
- "value": "(target: number, start: number, end?: number) => JSONArray",
- "description": "Returns the this object after copying a section of the array identified by start and end\r\nto the same array starting at position target"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "entries",
- "value": "() => IterableIterator<[number, JSONValue]>",
- "description": "Returns an iterable of key, value pairs for every entry in the array"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "keys",
- "value": "() => IterableIterator",
- "description": "Returns an iterable of keys in the array"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "values",
- "value": "() => IterableIterator",
- "description": "Returns an iterable of values in the array"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "includes",
- "value": "(searchElement: JSONValue, fromIndex?: number) => boolean",
- "description": "Determines whether an array includes a certain element, returning true or false as appropriate."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "flatMap",
- "value": "(callback: (this: This, value: JSONValue, index: number, array: JSONValue[]) => U | readonly U[], thisArg?: This) => U[]",
- "description": "Calls a defined callback function on each element of an array. Then, flattens the result into\r\na new array.\r\nThis is identical to a map followed by flat with depth 1."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "flat",
- "value": "(this: A, depth?: D) => FlatArray[]",
- "description": "Returns a new array with all sub-array elements concatenated into it recursively up to the\r\nspecified depth."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "__@iterator@386",
- "value": "() => IterableIterator",
- "description": "Iterator"
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "__@unscopables@388",
- "value": "() => { copyWithin: boolean; entries: boolean; fill: boolean; find: boolean; findIndex: boolean; keys: boolean; values: boolean; }",
- "description": "Returns an object whose properties have the value 'true'\r\nwhen they will be absent when used in a 'with' statement."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "MethodSignature",
- "name": "at",
- "value": "(index: number) => JSONValue",
- "description": "Takes an integer value and returns the item at that index,allowing for positive and negative integers.Negative integers count back from the last item in the array."
- }
- ],
- "value": "interface JSONArray extends Array {}"
- }
- },
- "jsDocExamples": true
- }
- ],
- "related": [],
- "examples": {
- "description": "Usage examples",
- "exampleGroups": [
- {
- "title": "apiVersion",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Get API version used for webhook request.",
- "tabs": [
- {
- "title": "Example",
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { apiVersion } = await authenticate.webhook(request);\n return new Response();\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "shop",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Get the shop that triggered a webhook.",
- "tabs": [
- {
- "title": "Example",
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { shop } = await authenticate.webhook(request);\n return new Response();\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "topic",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Get the webhook topic.",
- "tabs": [
- {
- "title": "Example",
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { topic } = await authenticate.webhook(request);\n\n switch (topic) {\n case \"APP_UNINSTALLED\":\n // Do something when the app is uninstalled.\n break;\n }\n\n return new Response();\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "webhookId",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Get the webhook ID.",
- "tabs": [
- {
- "title": "Example",
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { webhookId } = await authenticate.webhook(request);\n return new Response();\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- },
- {
- "title": "payload",
- "examples": [
- {
- "description": "",
- "codeblock": {
- "title": "Get the request's POST payload.",
- "tabs": [
- {
- "title": "Example",
- "code": "import { ActionFunction } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const action: ActionFunction = async ({ request }) => {\n const { payload } = await authenticate.webhook(request);\n return new Response();\n};",
- "language": "typescript"
- }
- ]
- }
- }
- ]
- }
- ]
- }
- },
- {
- "name": "shopifyApp",
- "description": "Returns a set of functions that can be used by the app's backend to be able to respond to all Shopify requests.\n\nThe 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.\n\nRefer to the [Related](#related) section to see all supported contexts in `authenticate` and `unauthenticated`.",
- "category": "Entrypoints",
- "type": "function",
- "isVisualComponent": false,
- "definitions": [
- {
- "title": "shopifyApp",
- "description": "Function to create a new Shopify API object.",
- "type": "ShopifyAppGeneratedType",
- "typeDefinitions": {
- "ShopifyAppGeneratedType": {
- "filePath": "/server/shopify-app.ts",
- "name": "ShopifyAppGeneratedType",
- "description": "Creates an object your app will use to interact with Shopify.",
- "params": [
- {
- "name": "appConfig",
- "description": "Configuration options for your Shopify app, such as the scopes your app needs.",
- "value": "Config extends AppConfigArg",
- "filePath": "/server/shopify-app.ts"
- }
- ],
- "returns": {
- "filePath": "/server/shopify-app.ts",
- "description": "`ShopifyApp` An object constructed using your appConfig. It has methods for interacting with Shopify.",
- "name": "ShopifyApp>",
- "value": "ShopifyApp>"
- },
- "value": "export function shopifyApp<\n Config extends AppConfigArg,\n Resources extends ShopifyRestResources,\n Storage extends SessionStorage,\n>(appConfig: Config): ShopifyApp {\n const api = deriveApi(appConfig);\n const config = deriveConfig(appConfig, api.config);\n const logger = overrideLogger(api.logger);\n\n if (appConfig.webhooks) {\n api.webhooks.addHandlers(appConfig.webhooks);\n }\n\n const params: BasicParams = {api, config, logger};\n const oauth = new AuthStrategy(params);\n\n const shopify:\n | AdminApp\n | AppStoreApp\n | SingleMerchantApp = {\n sessionStorage: config.sessionStorage,\n addDocumentResponseHeaders: addDocumentResponseHeadersFactory(params),\n registerWebhooks: registerWebhooksFactory(params),\n authenticate: {\n admin: oauth.authenticateAdmin.bind(oauth),\n public: authenticatePublicFactory(params),\n webhook: authenticateWebhookFactory<\n Resources,\n keyof Config['webhooks'] | MandatoryTopics\n >(params),\n },\n unauthenticated: {\n admin: unauthenticatedAdminContextFactory(params),\n },\n };\n\n if (\n isAppStoreApp(shopify, appConfig) ||\n isSingleMerchantApp(shopify, appConfig)\n ) {\n shopify.login = loginFactory(params);\n }\n\n return shopify as ShopifyApp;\n}",
- "examples": [
- {
- "description": "The minimum viable configuration",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n apiKey: process.env.SHOPIFY_API_KEY!,\n apiSecretKey: process.env.SHOPIFY_API_SECRET!,\n scopes: process.env.SCOPES?.split(\",\")!,\n appUrl: process.env.SHOPIFY_APP_URL!,\n});\nexport default shopify;",
- "title": "Example"
- }
- ]
- }
- ]
- },
- "AppConfigArg": {
- "filePath": "/server/config-types.ts",
- "name": "AppConfigArg",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "appUrl",
- "value": "string",
- "description": "The URL your app is running on.\n\nThe `@shopify/cli` provides this URL as `process.env.SHOPIFY_APP_URL`. For development this is probably a tunnel URL that points to your local machine. If this is a production app, this is your production URL."
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "sessionStorage",
- "value": "Storage",
- "description": "An adaptor for storing sessions in your database of choice.\n\nShopify provides multiple session storage adaptors and you can create your own.\n\n\n\n\n",
- "examples": [
- {
- "description": "Using Prisma",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { PrismaSessionStorage } from \"@shopify/shopify-app-session-storage-prisma\";\n\nimport prisma from \"~/db.server\";\n\nconst shopify = shopifyApp({\n // ... etc\n sessionStorage: new PrismaSessionStorage(prisma),\n});\nexport default shopify;",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "useOnlineTokens",
- "value": "boolean",
- "description": "Whether your app use online or offline tokens.\n\nIf your app uses online tokens, then both online and offline tokens will be saved to your database. This ensures your app can perform background jobs.\n\n\n\n\n",
- "isOptional": true,
- "defaultValue": "`false`"
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "webhooks",
- "value": "WebhookConfig",
- "description": "The config for the webhook topics your app would like to subscribe to.\n\n\n\n\n\n\n\nThis can be in used in conjunction with the afterAuth hook to register webhook topics when a user installs your app. Or you can use this function in other processes such as background jobs.",
- "isOptional": true,
- "examples": [
- {
- "description": "Registering for a webhook when a merchant uninstalls your app.",
- "tabs": [
- {
- "code": "import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n webhooks: {\n APP_UNINSTALLED: {\n deliveryMethod: DeliveryMethod.Http,\n callbackUrl: \"/webhooks\",\n },\n },\n hooks: {\n afterAuth: async ({ session }) => {\n shopify.registerWebhooks({ session });\n }\n },\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;\n\n// /app/routes/webhooks.jsx\nimport { ActionArgs } from \"@remix-run/node\";\n\nimport { authenticate } from \"../shopify.server\";\nimport db from \"../db.server\";\n\nexport const action = async ({ request }: ActionArgs) => {\n const { topic, shop } = await authenticate.webhook(request);\n\n switch (topic) {\n case \"APP_UNINSTALLED\":\n await db.session.deleteMany({ where: { shop } });\n break;\n case \"CUSTOMERS_DATA_REQUEST\":\n case \"CUSTOMERS_REDACT\":\n case \"SHOP_REDACT\":\n default:\n throw new Response(\"Unhandled webhook topic\", { status: 404 });\n }\n throw new Response();\n};",
- "title": "/app/shopify.server.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "hooks",
- "value": "HooksConfig",
- "description": "Functions to call at key places during your apps lifecycle.\n\nThese functions are called in the context of the request that triggered them. This means you can access the session.",
- "isOptional": true,
- "examples": [
- {
- "description": "Seeding your database custom data when a merchant installs your app.",
- "tabs": [
- {
- "code": "import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { seedStoreData } from \"~/db/seeds\"\n\nconst shopify = shopifyApp({\n hooks: {\n afterAuth: async ({ session }) => {\n seedStoreData({session})\n }\n },\n // ...etc\n});",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isEmbeddedApp",
- "value": "boolean",
- "description": "Does your app render embedded inside the Shopify Admin or on its own.\n\nUnless you have very specific needs, this should be true.",
- "isOptional": true,
- "defaultValue": "`true`"
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "distribution",
- "value": "AppDistribution",
- "description": "How your app is distributed. Default is `AppDistribution.AppStore`.\n\n\n\n\n",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "ApiVersion",
- "description": "What version of Shopify's Admin API's would you like to use.\n\n\n\n\n",
- "isOptional": true,
- "defaultValue": "`LATEST_API_VERSION` from `@shopify/shopify-app-remix`",
- "examples": [
- {
- "description": "Using the latest API Version (Recommended)",
- "tabs": [
- {
- "code": "import { LATEST_API_VERSION, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n apiVersion: LATEST_API_VERSION,\n});",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "authPathPrefix",
- "value": "string",
- "description": "A path that Shopify can reserve for auth related endpoints.\n\nThis must match a $ route in your Remix app. That route must export a loader function that calls `shopify.authenticate.admin(request)`.",
- "isOptional": true,
- "defaultValue": "`\"/auth\"`",
- "examples": [
- {
- "description": "Using the latest API Version (Recommended)",
- "tabs": [
- {
- "code": "import { LATEST_API_VERSION, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n apiVersion: LATEST_API_VERSION,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;\n\n// /app/routes/auth/$.jsx\nimport { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../../shopify.server\";\n\nexport async function loader({ request }: LoaderArgs) {\n await authenticate.admin(request);\n\n return null\n}",
- "title": "/app/shopify.server.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiKey",
- "value": "string",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiSecretKey",
- "value": "string",
- "description": ""
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "scopes",
- "value": "string[] | AuthScopes",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "adminApiAccessToken",
- "value": "string",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "userAgentPrefix",
- "value": "string",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "privateAppStorefrontAccessToken",
- "value": "string",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "customShopDomains",
- "value": "(string | RegExp)[]",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "billing",
- "value": "BillingConfig",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "restResources",
- "value": "T",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "logger",
- "value": "{ log?: LogFunction; level?: LogSeverity; httpRequests?: boolean; timestamps?: boolean; }",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface AppConfigArg<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n Storage extends SessionStorage = SessionStorage,\n> extends Omit<\n ApiConfigArg,\n | 'hostName'\n | 'hostScheme'\n | 'isEmbeddedApp'\n | 'apiVersion'\n | 'isCustomStoreApp'\n > {\n /**\n * The URL your app is running on.\n *\n * The `@shopify/cli` provides this URL as `process.env.SHOPIFY_APP_URL`. For development this is probably a tunnel URL that points to your local machine. If this is a production app, this is your production URL.\n */\n appUrl: string;\n\n /**\n * An adaptor for storing sessions in your database of choice.\n *\n * Shopify provides multiple session storage adaptors and you can create your own.\n *\n * {@link https://github.com/Shopify/shopify-app-js/blob/main/README.md#session-storage-options}\n *\n * @example\n * Using Prisma\n * ```ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { PrismaSessionStorage } from \"@shopify/shopify-app-session-storage-prisma\";\n *\n * import prisma from \"~/db.server\";\n *\n * const shopify = shopifyApp({\n * // ... etc\n * sessionStorage: new PrismaSessionStorage(prisma),\n * });\n * export default shopify;\n * ```\n */\n sessionStorage: Storage;\n\n /**\n * Whether your app use online or offline tokens.\n *\n * If your app uses online tokens, then both online and offline tokens will be saved to your database. This ensures your app can perform background jobs.\n *\n * {@link https://shopify.dev/docs/apps/auth/oauth/access-modes}\n *\n * @defaultValue `false`\n */\n useOnlineTokens?: boolean;\n\n /**\n * The config for the webhook topics your app would like to subscribe to.\n *\n * {@link https://shopify.dev/docs/apps/webhooks}\n *\n * This can be in used in conjunction with the afterAuth hook to register webhook topics when a user installs your app. Or you can use this function in other processes such as background jobs.\n *\n * @example\n * Registering for a webhook when a merchant uninstalls your app.\n * ```ts\n * // /app/shopify.server.ts\n * import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n *\n * const shopify = shopifyApp({\n * webhooks: {\n * APP_UNINSTALLED: {\n * deliveryMethod: DeliveryMethod.Http,\n * callbackUrl: \"/webhooks\",\n * },\n * },\n * hooks: {\n * afterAuth: async ({ session }) => {\n * shopify.registerWebhooks({ session });\n * }\n * },\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n *\n * // /app/routes/webhooks.jsx\n * import { ActionArgs } from \"@remix-run/node\";\n *\n * import { authenticate } from \"../shopify.server\";\n * import db from \"../db.server\";\n *\n * export const action = async ({ request }: ActionArgs) => {\n * const { topic, shop } = await authenticate.webhook(request);\n *\n * switch (topic) {\n * case \"APP_UNINSTALLED\":\n * await db.session.deleteMany({ where: { shop } });\n * break;\n * case \"CUSTOMERS_DATA_REQUEST\":\n * case \"CUSTOMERS_REDACT\":\n * case \"SHOP_REDACT\":\n * default:\n * throw new Response(\"Unhandled webhook topic\", { status: 404 });\n * }\n * throw new Response();\n * };\n * ```\n */\n webhooks?: WebhookConfig;\n\n /**\n * Functions to call at key places during your apps lifecycle.\n *\n * These functions are called in the context of the request that triggered them. This means you can access the session.\n *\n * @example\n * Seeding your database custom data when a merchant installs your app.\n * ```ts\n * import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { seedStoreData } from \"~/db/seeds\"\n *\n * const shopify = shopifyApp({\n * hooks: {\n * afterAuth: async ({ session }) => {\n * seedStoreData({session})\n * }\n * },\n * // ...etc\n * });\n * ```\n */\n hooks?: HooksConfig;\n\n /**\n * Does your app render embedded inside the Shopify Admin or on its own.\n *\n * Unless you have very specific needs, this should be true.\n *\n * @defaultValue `true`\n */\n isEmbeddedApp?: boolean;\n\n /**\n * How your app is distributed. Default is `AppDistribution.AppStore`.\n *\n * {@link https://shopify.dev/docs/apps/distribution}\n */\n distribution?: AppDistribution;\n\n /**\n * What version of Shopify's Admin API's would you like to use.\n *\n * {@link https://shopify.dev/docs/api/}\n *\n * @defaultValue `LATEST_API_VERSION` from `@shopify/shopify-app-remix`\n *\n * @example\n * Using the latest API Version (Recommended)\n * ```ts\n * import { LATEST_API_VERSION, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n *\n * const shopify = shopifyApp({\n * // ...etc\n * apiVersion: LATEST_API_VERSION,\n * });\n * ```\n */\n apiVersion?: ApiVersion;\n\n /**\n * A path that Shopify can reserve for auth related endpoints.\n *\n * This must match a $ route in your Remix app. That route must export a loader function that calls `shopify.authenticate.admin(request)`.\n *\n * @default `\"/auth\"`\n *\n * @example\n * Using the latest API Version (Recommended)\n * ```ts\n * // /app/shopify.server.ts\n * import { LATEST_API_VERSION, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n *\n * const shopify = shopifyApp({\n * // ...etc\n * apiVersion: LATEST_API_VERSION,\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n *\n * // /app/routes/auth/$.jsx\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../../shopify.server\";\n *\n * export async function loader({ request }: LoaderArgs) {\n * await authenticate.admin(request);\n *\n * return null\n * }\n * ```\n */\n authPathPrefix?: string;\n}"
- },
- "WebhookConfig": {
- "filePath": "/server/config-types.ts",
- "name": "WebhookConfig",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "name": "[key: string]",
- "value": "WebhookHandler | WebhookHandler[]"
- }
- ],
- "value": "export interface WebhookConfig {\n [key: string]: WebhookHandler | WebhookHandler[];\n}"
- },
- "HooksConfig": {
- "filePath": "/server/config-types.ts",
- "name": "HooksConfig",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "afterAuth",
- "value": "(options: AfterAuthOptions) => void | Promise",
- "description": "A function to call after a merchant installs your app",
- "isOptional": true,
- "examples": [
- {
- "description": "Registering webhooks and seeding data when a merchant installs your app.",
- "tabs": [
- {
- "code": "import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { seedStoreData } from \"~/db/seeds\"\n\nconst shopify = shopifyApp({\n hooks: {\n afterAuth: async ({ session }) => {\n shopify.registerWebhooks({ session });\n seedStoreData({session})\n }\n },\n webhooks: {\n APP_UNINSTALLED: {\n deliveryMethod: DeliveryMethod.Http,\n callbackUrl: \"/webhooks\",\n },\n },\n // ...etc\n});",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "interface HooksConfig {\n /**\n * A function to call after a merchant installs your app\n *\n * @param context - An object with context about the request that triggered the hook.\n * @param context.session - The session of the merchant that installed your app. This is the output of sessionStorage.loadSession in case people want to load their own.\n * @param context.admin - An object with access to the Shopify Admin API's.\n *\n * @example\n * Registering webhooks and seeding data when a merchant installs your app.\n * ```ts\n * import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { seedStoreData } from \"~/db/seeds\"\n *\n * const shopify = shopifyApp({\n * hooks: {\n * afterAuth: async ({ session }) => {\n * shopify.registerWebhooks({ session });\n * seedStoreData({session})\n * }\n * },\n * webhooks: {\n * APP_UNINSTALLED: {\n * deliveryMethod: DeliveryMethod.Http,\n * callbackUrl: \"/webhooks\",\n * },\n * },\n * // ...etc\n * });\n * ```\n */\n afterAuth?: (options: AfterAuthOptions) => void | Promise;\n}"
- },
- "AfterAuthOptions": {
- "filePath": "/server/config-types.ts",
- "name": "AfterAuthOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": ""
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "AdminApiContext",
- "description": ""
- }
- ],
- "value": "export interface AfterAuthOptions<\n R extends ShopifyRestResources = ShopifyRestResources,\n> {\n session: Session;\n admin: AdminApiContext;\n}"
- },
- "AdminApiContext": {
- "filePath": "/server/config-types.ts",
- "name": "AdminApiContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "rest",
- "value": "RestClientWithResources",
- "description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
- "examples": [
- {
- "description": "Getting the number of orders in a store using REST resources",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- },
- {
- "description": "Performing a GET request to the REST API",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/config-types.ts",
- "syntaxKind": "PropertySignature",
- "name": "graphql",
- "value": "GraphqlQueryFunction",
- "description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
- "examples": [
- {
- "description": "Creating a new product",
- "tabs": [
- {
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
- "title": "Example"
- }
- ]
- }
- ]
- }
- ],
- "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Getting the number of orders in a store using REST resources\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Creating a new product\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
- },
- "RestClientWithResources": {
- "filePath": "/server/clients/admin/rest.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RestClientWithResources",
- "value": "RemixRestClient & {resources: Resources}",
- "description": ""
- },
- "GraphqlQueryFunction": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "GraphqlQueryFunction",
- "description": "",
- "params": [
- {
- "name": "query",
- "description": "",
- "value": "string",
- "filePath": "/server/clients/admin/graphql.ts"
- },
- {
- "name": "options",
- "description": "",
- "value": "QueryOptions",
- "isOptional": true,
- "filePath": "/server/clients/admin/graphql.ts"
- }
- ],
- "returns": {
- "filePath": "/server/clients/admin/graphql.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type GraphqlQueryFunction = (\n query: string,\n options?: QueryOptions,\n) => Promise;"
- },
- "QueryOptions": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "variables",
- "value": "QueryVariables",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "apiVersion",
- "value": "ApiVersion",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "headers",
- "value": "{ [key: string]: any; }",
- "description": "",
- "isOptional": true
- },
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "syntaxKind": "PropertySignature",
- "name": "tries",
- "value": "number",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "interface QueryOptions {\n variables?: QueryVariables;\n apiVersion?: ApiVersion;\n headers?: {[key: string]: any};\n tries?: number;\n}"
- },
- "QueryVariables": {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "QueryVariables",
- "description": "",
- "members": [
- {
- "filePath": "/server/clients/admin/graphql.ts",
- "name": "[key: string]",
- "value": "any"
- }
- ],
- "value": "interface QueryVariables {\n [key: string]: any;\n}"
- },
- "AppDistribution": {
- "filePath": "/server/types.ts",
- "syntaxKind": "EnumDeclaration",
- "name": "AppDistribution",
- "value": "export enum AppDistribution {\n AppStore = 'app_store',\n SingleMerchant = 'single_merchant',\n ShopifyAdmin = 'shopify_admin',\n}",
- "members": [
- {
- "filePath": "/server/types.ts",
- "name": "AppStore",
- "value": "app_store"
- },
- {
- "filePath": "/server/types.ts",
- "name": "SingleMerchant",
- "value": "single_merchant"
- },
- {
- "filePath": "/server/types.ts",
- "name": "ShopifyAdmin",
- "value": "shopify_admin"
- }
- ]
- },
- "ShopifyApp": {
- "filePath": "/server/types.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "ShopifyApp",
- "value": "Config['distribution'] extends AppDistribution.ShopifyAdmin\n ? AdminApp\n : Config['distribution'] extends AppDistribution.SingleMerchant\n ? SingleMerchantApp\n : Config['distribution'] extends AppDistribution.AppStore\n ? AppStoreApp\n : AppStoreApp",
- "description": "An object your app can use to interact with Shopify.\n\nBy default, the app's distribution is `AppStore`."
- },
- "AdminApp": {
- "filePath": "/server/types.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "AdminApp",
- "value": "ShopifyAppBase",
- "description": "",
- "members": [
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "sessionStorage",
- "value": "SessionStorageType",
- "description": "The `SessionStorage` instance you passed in as a config option.",
- "examples": [
- {
- "description": "Using Prisma",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { PrismaSessionStorage } from \"@shopify/shopify-app-session-storage-prisma\";\nimport prisma from \"~/db.server\";\n\nconst shopify = shopifyApp({\n sesssionStorage: new PrismaSessionStorage(prisma),\n // ...etc\n})\n\n// shopify.sessionStorage is an instance of PrismaSessionStorage",
- "title": "/app/shopify.server.ts"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "addDocumentResponseHeaders",
- "value": "AddDocumentResponseHeaders",
- "description": "Adds the required Content Security Policy headers for Shopify apps to the given Headers object.\n\n\n\n\n",
- "examples": [
- {
- "description": "Globally adding CSP headers to entry.server.tsx.",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n});\nexport default shopify;\nexport const addDocumentResponseheaders = shopify.addDocumentResponseheaders;",
- "title": "~/shopify.server.ts"
- },
- {
- "code": "import { addDocumentResponseHeaders } from \"~/shopify.server\";\n\nexport default function handleRequest(\n request: Request,\n responseStatusCode: number,\n responseHeaders: Headers,\n remixContext: EntryContext\n) {\n const markup = renderToString(\n \n );\n\n responseHeaders.set(\"Content-Type\", \"text/html\");\n addDocumentResponseHeaders(request, responseHeaders);\n\n return new Response(\"\" + markup, {\n status: responseStatusCode,\n headers: responseHeaders,\n });\n}",
- "title": "entry.server.tsx"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "registerWebhooks",
- "value": "RegisterWebhooks",
- "description": "Register webhook topics for a store using the given session. Most likely you want to use this in combination with the afterAuth hook.",
- "examples": [
- {
- "description": "Registering webhooks when a merchant installs your app.",
- "tabs": [
- {
- "code": "import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n hooks: {\n afterAuth: async ({ session }) => {\n shopify.registerWebhooks({ session });\n }\n },\n webhooks: {\n APP_UNINSTALLED: {\n deliveryMethod: DeliveryMethod.Http,\n callbackUrl: \"/webhooks\",\n },\n },\n // ...etc\n});",
- "title": "Example"
- }
- ]
- }
- ]
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "authenticate",
- "value": "Authenticate",
- "description": "Ways to authenticate requests from different surfaces across Shopify."
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "unauthenticated",
- "value": "Unauthenticated",
- "description": "Ways to get Contexts from requests that do not originate from Shopify."
- }
- ]
- },
- "SessionStorageType": {
- "filePath": "/server/types.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "SessionStorageType",
- "value": "Config['sessionStorage'] extends SessionStorage\n ? Config['sessionStorage']\n : SessionStorage",
- "description": ""
- },
- "AddDocumentResponseHeaders": {
- "filePath": "/server/types.ts",
- "name": "AddDocumentResponseHeaders",
- "description": "",
- "params": [
- {
- "name": "request",
- "description": "",
- "value": "Request",
- "filePath": "/server/types.ts"
- },
- {
- "name": "headers",
- "description": "",
- "value": "Headers",
- "filePath": "/server/types.ts"
- }
- ],
- "returns": {
- "filePath": "/server/types.ts",
- "description": "",
- "name": "void",
- "value": "void"
- },
- "value": "type AddDocumentResponseHeaders = (request: Request, headers: Headers) => void;"
- },
- "RegisterWebhooks": {
- "filePath": "/server/types.ts",
- "name": "RegisterWebhooks",
- "description": "",
- "params": [
- {
- "name": "options",
- "description": "",
- "value": "RegisterWebhooksOptions",
- "filePath": "/server/types.ts"
- }
- ],
- "returns": {
- "filePath": "/server/types.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
+ "language": "typescript"
+ }
+ ]
+ }
},
- "value": "type RegisterWebhooks = (\n options: RegisterWebhooksOptions,\n) => Promise;"
- },
- "RegisterWebhooksOptions": {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "name": "RegisterWebhooksOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/webhooks/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": "The Shopify session used to register webhooks using the Admin API."
+ {
+ "description": "Use `admin.rest.` to make custom requests to the API.",
+ "codeblock": {
+ "title": "Performing a GET request to the REST API",
+ "tabs": [
+ {
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
+ "language": "typescript"
+ }
+ ]
}
- ],
- "value": "export interface RegisterWebhooksOptions {\n /**\n * The Shopify session used to register webhooks using the Admin API.\n */\n session: Session;\n}"
- },
- "Authenticate": {
- "filePath": "/server/types.ts",
- "name": "Authenticate",
- "description": "",
- "members": [
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "AuthenticateAdmin>",
- "description": "Authenticate an admin Request and get back an authenticated admin context. Use the authenticated admin context to interact with Shopify.\n\nExamples of when to use this are requests from your app's UI, or requests from admin extensions.\n\nIf there is no session for the Request, this will redirect the merchant to correct auth flows.",
- "examples": [
+ }
+ ]
+ },
+ {
+ "title": "graphql",
+ "examples": [
+ {
+ "description": "Use `admin.graphql` to make query / mutation requests.",
+ "codeblock": {
+ "title": "Querying the GraphQL API",
+ "tabs": [
{
- "description": "Registering webhooks and seeding data when a merchant installs your app.",
- "tabs": [
- {
- "code": "import { LATEST_API_VERSION, shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../../shopify.server\";\n\nexport async function loader({ request }: LoaderArgs) {\n const {admin, session, sessionToken, billing} = authenticate.admin(request);\n\n return json(await admin.rest.resources.Product.count({ session }));\n}",
- "title": "/app/routes/**\\/*.jsx"
- }
- ]
+ "title": "Example",
+ "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
+ "language": "typescript"
}
]
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "public",
- "value": "AuthenticatePublic",
- "description": "Authenticate a public request and get back a session token.",
- "examples": [
+ }
+ }
+ ]
+ },
+ {
+ "title": "require",
+ "examples": [
+ {
+ "description": "Call `billing.request` in the `onFailure` callback to immediately request payment.",
+ "codeblock": {
+ "title": "Requesting billing right away",
+ "tabs": [
{
- "description": "Authenticating a request from a checkout extension",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../../shopify.server\";\nimport { getWidgets } from \"~/db/widgets\";\n\nexport async function loader({ request }: LoaderArgs) {\n const {sessionToken} = authenticate.public(request);\n\n return json(await getWidgets(sessionToken));\n}",
- "title": "/app/routes/api/checkout.jsx"
- }
- ]
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n isTest: true,\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n // App logic\n};",
+ "language": "typescript"
+ },
+ {
+ "title": "shopify.server.ts",
+ "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
}
]
- },
- {
- "filePath": "/server/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "webhook",
- "value": "AuthenticateWebhook<\n RestResourcesType,\n keyof Config['webhooks'] | MandatoryTopics\n >",
- "description": "Authenticate a Shopify webhook request, get back an authenticated admin context and details on the webhook request",
- "examples": [
+ }
+ },
+ {
+ "description": "Redirect to a different page in the `onFailure` callback, where the merchant can select a billing plan.",
+ "codeblock": {
+ "title": "Using a plan selection page",
+ "tabs": [
{
- "description": "Authenticating a webhook request",
- "tabs": [
- {
- "code": "import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n webhooks: {\n APP_UNINSTALLED: {\n deliveryMethod: DeliveryMethod.Http,\n callbackUrl: \"/webhooks\",\n },\n },\n hooks: {\n afterAuth: async ({ session }) => {\n shopify.registerWebhooks({ session });\n },\n },\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "/app/shopify.server.ts"
- },
- {
- "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport db from \"../db.server\";\n\nexport const action = async ({ request }: ActionArgs) => {\n const { topic, shop, session } = await authenticate.webhook(request);\n\n switch (topic) {\n case \"APP_UNINSTALLED\":\n if (session) {\n await db.session.deleteMany({ where: { shop } });\n }\n break;\n case \"CUSTOMERS_DATA_REQUEST\":\n case \"CUSTOMERS_REDACT\":\n case \"SHOP_REDACT\":\n default:\n throw new Response(\"Unhandled webhook topic\", { status: 404 });\n }\n\n throw new Response();\n};",
- "title": "/app/routes/webhooks.ts"
- }
- ]
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs, redirect } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n isTest: true,\n onFailure: () => redirect('/select-plan'),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n\n // App logic\n};",
+ "language": "typescript"
+ },
+ {
+ "title": "shopify.server.ts",
+ "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
}
]
}
- ],
- "value": "interface Authenticate {\n /**\n * Authenticate an admin Request and get back an authenticated admin context. Use the authenticated admin context to interact with Shopify.\n *\n * Examples of when to use this are requests from your app's UI, or requests from admin extensions.\n *\n * If there is no session for the Request, this will redirect the merchant to correct auth flows.\n *\n * @example\n * Registering webhooks and seeding data when a merchant installs your app.\n * ```ts\n * // /app/shopify.server.ts\n * import { LATEST_API_VERSION, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-04\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n * ```ts\n * // /app/routes/**\\/*.jsx\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../../shopify.server\";\n *\n * export async function loader({ request }: LoaderArgs) {\n * const {admin, session, sessionToken, billing} = authenticate.admin(request);\n *\n * return json(await admin.rest.resources.Product.count({ session }));\n * }\n * ```\n */\n admin: AuthenticateAdmin>;\n\n /**\n * Authenticate a public request and get back a session token.\n *\n * @example\n * Authenticating a request from a checkout extension\n *\n * ```ts\n * // /app/routes/api/checkout.jsx\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../../shopify.server\";\n * import { getWidgets } from \"~/db/widgets\";\n *\n * export async function loader({ request }: LoaderArgs) {\n * const {sessionToken} = authenticate.public(request);\n *\n * return json(await getWidgets(sessionToken));\n * }\n * ```\n */\n public: AuthenticatePublic;\n\n /**\n * Authenticate a Shopify webhook request, get back an authenticated admin context and details on the webhook request\n *\n * @example\n * Authenticating a webhook request\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { DeliveryMethod, shopifyApp } from \"@shopify/shopify-app-remix/server\";\n *\n * const shopify = shopifyApp({\n * webhooks: {\n * APP_UNINSTALLED: {\n * deliveryMethod: DeliveryMethod.Http,\n * callbackUrl: \"/webhooks\",\n * },\n * },\n * hooks: {\n * afterAuth: async ({ session }) => {\n * shopify.registerWebhooks({ session });\n * },\n * },\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n * ```ts\n * // /app/routes/webhooks.ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import db from \"../db.server\";\n *\n * export const action = async ({ request }: ActionArgs) => {\n * const { topic, shop, session } = await authenticate.webhook(request);\n *\n * switch (topic) {\n * case \"APP_UNINSTALLED\":\n * if (session) {\n * await db.session.deleteMany({ where: { shop } });\n * }\n * break;\n * case \"CUSTOMERS_DATA_REQUEST\":\n * case \"CUSTOMERS_REDACT\":\n * case \"SHOP_REDACT\":\n * default:\n * throw new Response(\"Unhandled webhook topic\", { status: 404 });\n * }\n *\n * throw new Response();\n * };\n * ```\n */\n webhook: AuthenticateWebhook<\n RestResourcesType,\n keyof Config['webhooks'] | MandatoryTopics\n >;\n}"
- },
- "AuthenticateAdmin": {
- "filePath": "/server/types.ts",
- "name": "AuthenticateAdmin",
- "description": "",
- "params": [
- {
- "name": "request",
- "description": "",
- "value": "Request",
- "filePath": "/server/types.ts"
+ }
+ ]
+ },
+ {
+ "title": "request",
+ "examples": [
+ {
+ "description": "Change where the merchant is returned to after approving the purchase using the `returnUrl` option.",
+ "codeblock": {
+ "title": "Using a custom return URL",
+ "tabs": [
+ {
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({\n plan: MONTHLY_PLAN,\n isTest: true,\n returnUrl: '/billing-complete',\n }),\n });\n\n // App logic\n};",
+ "language": "typescript"
+ },
+ {
+ "title": "shopify.server.ts",
+ "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
+ }
+ ]
}
- ],
- "returns": {
- "filePath": "/server/types.ts",
- "description": "",
- "name": "Promise>",
- "value": "Promise>"
- },
- "value": "type AuthenticateAdmin<\n Config extends AppConfigArg,\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> = (request: Request) => Promise>;"
- },
- "AdminContext": {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "AdminContext",
- "value": "Config['isEmbeddedApp'] extends false\n ? NonEmbeddedAdminContext\n : EmbeddedAdminContext",
- "description": ""
- },
- "NonEmbeddedAdminContext": {
- "filePath": "/server/authenticate/admin/types.ts",
- "name": "NonEmbeddedAdminContext",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": "The session for the user who made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
- "examples": [
+ }
+ ]
+ },
+ {
+ "title": "cancel",
+ "examples": [
+ {
+ "description": "Use the `billing.cancel` function to cancel an active subscription with the id returned from `billing.require`.",
+ "codeblock": {
+ "title": "Cancelling a subscription",
+ "tabs": [
{
- "description": "Getting your app's shop-specific widget data using an offline session",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({shop: session.shop));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
+ "title": "/app/routes/cancel-subscription.ts",
+ "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n const cancelledSubscription = await billing.cancel({\n subscriptionId: subscription.id,\n isTest: true,\n prorate: true,\n });\n\n // App logic\n};",
+ "language": "typescript"
},
{
- "description": "Getting your app's user-specific widget data using an online session",
- "tabs": [
- {
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({user: session.onlineAccessInfo!.id}));\n};",
- "title": "/app/routes/**\\/*.ts"
- }
- ]
+ "title": "shopify.server.ts",
+ "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
}
]
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "AdminApiContext",
- "description": "Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request."
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "billing",
- "value": "BillingContext",
- "description": "Billing methods for this store, based on the plans defined in the `billing` config option.\n\n\n\n\n"
- },
+ }
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "name": "App proxy",
+ "description": "The `authenticate.public.appProxy` function validates app proxy requests made by Shopify, and returns a context to enable querying Shopify APIs.",
+ "category": "Authenticate",
+ "subCategory": "Public",
+ "type": "object",
+ "isVisualComponent": false,
+ "definitions": [
+ {
+ "title": "authenticate.public.appProxy",
+ "description": "Authenticates requests coming from Shopify app proxies.",
+ "type": "AuthenticateAppProxy",
+ "typeDefinitions": {
+ "AuthenticateAppProxy": {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "name": "AuthenticateAppProxy",
+ "description": "",
+ "params": [
{
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "cors",
- "value": "EnsureCORSFunction",
- "description": "A function that ensures the CORS headers are set correctly for the response.",
- "examples": [
- {
- "description": "Setting CORS headers for a admin request",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getWidgets({user: session.onlineAccessInfo!.id})));\n};",
- "title": "/app/routes/admin/widgets.ts"
- }
- ]
- }
- ]
+ "name": "request",
+ "description": "",
+ "value": "Request",
+ "filePath": "/server/authenticate/public/appProxy/types.ts"
}
],
- "value": "export interface NonEmbeddedAdminContext<\n Config extends AppConfigArg,\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends AdminContextInternal {}"
+ "returns": {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "description": "",
+ "name": "Promise",
+ "value": "Promise"
+ },
+ "value": "export type AuthenticateAppProxy = (\n request: Request,\n) => Promise;"
},
- "BillingContext": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "BillingContext",
+ "AppProxyContext": {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "name": "AppProxyContext",
"description": "",
"members": [
{
- "filePath": "/server/authenticate/admin/billing/types.ts",
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
"syntaxKind": "PropertySignature",
- "name": "require",
- "value": "(options: RequireBillingOptions) => Promise",
- "description": "Checks if the shop has an active payment for any plan defined in the `billing` config option.",
- "examples": [
- {
- "description": "Requesting billing right away",
- "tabs": [
- {
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n isTest: true,\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- },
- {
- "description": "Redirecting to a page where the merchant can select a plan",
- "tabs": [
- {
- "code": "import { LoaderArgs, redirect } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n isTest: true,\n onFailure: () => redirect('/select-plan'),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- }
- ]
+ "name": "session",
+ "value": "undefined",
+ "description": "No session is available for the shop that made this request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice."
},
{
- "filePath": "/server/authenticate/admin/billing/types.ts",
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
"syntaxKind": "PropertySignature",
- "name": "request",
- "value": "(options: RequestBillingOptions) => Promise",
- "description": "Requests payment for the plan.",
- "examples": [
- {
- "description": "Requesting billing when there is no payment with a custom return URL",
- "tabs": [
- {
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({\n plan: MONTHLY_PLAN,\n isTest: true,\n returnUrl: '/billing-complete',\n }),\n });\n\n // App logic\n};",
- "title": "/app/routes/**\\/*.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- }
- ]
- }
- ]
+ "name": "admin",
+ "value": "undefined",
+ "description": "No session is available for the shop that made this request. Therefore no methods for interacting with the GraphQL / REST Admin APIs are available."
},
{
- "filePath": "/server/authenticate/admin/billing/types.ts",
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
"syntaxKind": "PropertySignature",
- "name": "cancel",
- "value": "(options: CancelBillingOptions) => Promise",
- "description": "Cancels an ongoing subscription, given its ID.",
+ "name": "liquid",
+ "value": "LiquidResponseFunction",
+ "description": "A utility for creating a Liquid Response.",
"examples": [
{
- "description": "Cancelling a subscription",
+ "title": "Rendering liquid content",
+ "description": "Use the `liquid` helper to render a `Response` with Liquid content.",
"tabs": [
{
- "code": "import { LoaderArgs } from \"@remix-run/node\";\nimport { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { billing } = await authenticate.admin(request);\n const billingCheck = await billing.require({\n plans: [MONTHLY_PLAN],\n onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n });\n\n const subscription = billingCheck.appSubscriptions[0];\n const cancelledSubscription = await billing.cancel({\n subscriptionId: subscription.id,\n isTest: true,\n prorate: true,\n });\n\n // App logic\n};",
- "title": "/app/routes/cancel-subscription.ts"
- },
- {
- "code": "import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n\nexport const MONTHLY_PLAN = 'Monthly subscription';\nexport const ANNUAL_PLAN = 'Annual subscription';\n\nconst shopify = shopifyApp({\n // ...etc\n billing: {\n [MONTHLY_PLAN]: {\n amount: 5,\n currencyCode: 'USD',\n interval: BillingInterval.Every30Days,\n },\n [ANNUAL_PLAN]: {\n amount: 50,\n currencyCode: 'USD',\n interval: BillingInterval.Annual,\n },\n }\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
+ "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
+ "title": "app/routes/**\\/.ts"
}
]
}
]
}
],
- "value": "export interface BillingContext {\n /**\n * Checks if the shop has an active payment for any plan defined in the `billing` config option.\n *\n * @returns A promise that resolves to an object containing the active purchases for the shop.\n *\n * @example\n * Requesting billing right away\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * isTest: true,\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * @example\n * Redirecting to a page where the merchant can select a plan\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, redirect } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN, ANNUAL_PLAN],\n * isTest: true,\n * onFailure: () => redirect('/select-plan'),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * console.log(`Shop is on ${subscription.name} (id ${subscription.id})`);\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n require: (\n options: RequireBillingOptions,\n ) => Promise;\n\n /**\n * Requests payment for the plan.\n *\n * @returns Redirects to the confirmation URL for the payment.\n *\n * @example\n * Requesting billing when there is no payment with a custom return URL\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({\n * plan: MONTHLY_PLAN,\n * isTest: true,\n * returnUrl: '/billing-complete',\n * }),\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n request: (options: RequestBillingOptions) => Promise;\n\n /**\n * Cancels an ongoing subscription, given its ID.\n *\n * @returns The cancelled subscription.\n *\n * @example\n * Cancelling a subscription\n * ```ts\n * // /app/routes/cancel-subscription.ts\n * import { LoaderArgs } from \"@remix-run/node\";\n * import { authenticate, MONTHLY_PLAN } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { billing } = await authenticate.admin(request);\n * const billingCheck = await billing.require({\n * plans: [MONTHLY_PLAN],\n * onFailure: async () => billing.request({ plan: MONTHLY_PLAN }),\n * });\n *\n * const subscription = billingCheck.appSubscriptions[0];\n * const cancelledSubscription = await billing.cancel({\n * subscriptionId: subscription.id,\n * isTest: true,\n * prorate: true,\n * });\n *\n * // App logic\n * };\n * ```\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp, BillingInterval } from \"@shopify/shopify-app-remix/server\";\n *\n * export const MONTHLY_PLAN = 'Monthly subscription';\n * export const ANNUAL_PLAN = 'Annual subscription';\n *\n * const shopify = shopifyApp({\n * // ...etc\n * billing: {\n * [MONTHLY_PLAN]: {\n * amount: 5,\n * currencyCode: 'USD',\n * interval: BillingInterval.Every30Days,\n * },\n * [ANNUAL_PLAN]: {\n * amount: 50,\n * currencyCode: 'USD',\n * interval: BillingInterval.Annual,\n * },\n * }\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n */\n cancel: (options: CancelBillingOptions) => Promise;\n}"
- },
- "RequireBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "RequireBillingOptions",
- "description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "plans",
- "value": "(keyof Config[\"billing\"])[]",
- "description": "The plans to check for. Must be one of the values defined in the `billing` config option."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "onFailure",
- "value": "(error: any) => Promise",
- "description": "How to handle the request if the shop doesn't have an active payment for any plan."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isTest",
- "value": "boolean",
- "description": "",
- "isOptional": true
- }
- ],
- "value": "export interface RequireBillingOptions\n extends Omit {\n /**\n * The plans to check for. Must be one of the values defined in the `billing` config option.\n */\n plans: (keyof Config['billing'])[];\n /**\n * How to handle the request if the shop doesn't have an active payment for any plan.\n */\n onFailure: (error: any) => Promise;\n}"
+ "value": "export interface AppProxyContext extends Context {\n /**\n * No session is available for the shop that made this request.\n *\n * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n */\n session: undefined;\n\n /**\n * No session is available for the shop that made this request.\n * Therefore no methods for interacting with the GraphQL / REST Admin APIs are available.\n */\n admin: undefined;\n}"
},
- "RequestBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "RequestBillingOptions",
+ "LiquidResponseFunction": {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "name": "LiquidResponseFunction",
"description": "",
- "members": [
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "plan",
- "value": "keyof Config[\"billing\"]",
- "description": "The plan to request. Must be one of the values defined in the `billing` config option."
- },
+ "params": [
{
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "isTest",
- "value": "boolean",
+ "name": "body",
"description": "",
- "isOptional": true
+ "value": "string",
+ "filePath": "/server/authenticate/public/appProxy/types.ts"
},
{
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "returnUrl",
- "value": "string",
+ "name": "initAndOptions",
"description": "",
- "isOptional": true
+ "value": "number | (ResponseInit & Options)",
+ "isOptional": true,
+ "filePath": "/server/authenticate/public/appProxy/types.ts"
}
],
- "value": "export interface RequestBillingOptions\n extends Omit {\n /**\n * The plan to request. Must be one of the values defined in the `billing` config option.\n */\n plan: keyof Config['billing'];\n}"
+ "returns": {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "description": "",
+ "name": "Response",
+ "value": "Response"
+ },
+ "value": "export type LiquidResponseFunction = (\n body: string,\n initAndOptions?: number | (ResponseInit & Options),\n) => Response;"
},
- "CancelBillingOptions": {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "name": "CancelBillingOptions",
+ "Options": {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "name": "Options",
"description": "",
"members": [
{
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "subscriptionId",
- "value": "string",
- "description": "The ID of the subscription to cancel."
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "prorate",
- "value": "boolean",
- "description": "Whether to prorate the cancellation.\n\n\n\n\n",
- "isOptional": true
- },
- {
- "filePath": "/server/authenticate/admin/billing/types.ts",
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
"syntaxKind": "PropertySignature",
- "name": "isTest",
+ "name": "layout",
"value": "boolean",
"description": "",
"isOptional": true
}
],
- "value": "export interface CancelBillingOptions {\n /**\n * The ID of the subscription to cancel.\n */\n subscriptionId: string;\n /**\n * Whether to prorate the cancellation.\n *\n * {@link https://shopify.dev/docs/apps/billing/subscriptions/cancel-recurring-charges}\n */\n prorate?: boolean;\n isTest?: boolean;\n}"
+ "value": "interface Options {\n layout?: boolean;\n}"
},
- "EmbeddedAdminContext": {
- "filePath": "/server/authenticate/admin/types.ts",
- "name": "EmbeddedAdminContext",
+ "AppProxyContextWithSession": {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "name": "AppProxyContextWithSession",
"description": "",
"members": [
{
- "filePath": "/server/authenticate/admin/types.ts",
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
"syntaxKind": "PropertySignature",
- "name": "sessionToken",
- "value": "JwtPayload",
- "description": "The decoded and validated session token for the request.\n\nReturned only if `isEmbeddedApp` is `true`.\n\n\n\n\n",
+ "name": "session",
+ "value": "Session",
+ "description": "The session for the shop that made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
"examples": [
{
- "description": "Getting your app's user-specific widget data using the session token",
+ "title": "Using the session object",
+ "description": "Get your app's data using an offline session for the shop that made the request.",
"tabs": [
{
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public(\n request\n );\n return json(await getWidgets({user: sessionToken.sub}));\n};",
- "title": "/app/routes/**\\/*.ts"
+ "code": "import { json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppModelData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }) => {\n const { session } = await authenticate.public.appProxy(request);\n return json(await getMyAppModelData({shop: session.shop));\n};",
+ "title": "app/routes/**\\/.ts"
}
]
}
]
},
{
- "filePath": "/server/authenticate/admin/types.ts",
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
"syntaxKind": "PropertySignature",
- "name": "redirect",
- "value": "RedirectFunction",
- "description": "A function that redirects the user to a new page, ensuring that the appropriate parameters are set for embeddedapps.\n\nReturned only if `isEmbeddedApp` is `true`.",
+ "name": "admin",
+ "value": "AdminApiContext",
+ "description": "Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request."
+ },
+ {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "syntaxKind": "PropertySignature",
+ "name": "liquid",
+ "value": "LiquidResponseFunction",
+ "description": "A utility for creating a Liquid Response.",
"examples": [
{
- "description": "Redirecting the user to the app's homepage",
- "tabs": [
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\");\n};",
- "title": "/app/routes/admin/widgets.ts"
- }
- ]
- },
- {
- "description": "Redirecting outside of Shopify Admin",
+ "title": "Rendering liquid content",
+ "description": "Use the `liquid` helper to render a `Response` with Liquid content.",
"tabs": [
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, redirect } = await authenticate.admin(request);\n return redirect(\"/\", { target: '_parent' });\n};",
- "title": "/app/routes/admin/widgets.ts"
+ "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
+ "title": "app/routes/**\\/.ts"
}
]
}
]
- },
+ }
+ ],
+ "value": "export interface AppProxyContextWithSession<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends Context {\n /**\n * The session for the shop that made the request.\n *\n * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n *\n * Use this to get shop or user-specific data.\n *\n * @example\n * Using the session object.\n * Get your app's data using an offline session for the shop that made the request.\n * ```ts\n * // app/routes/**\\/.ts\n * import { json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getMyAppModelData } from \"~/db/model.server\";\n *\n * export const loader = async ({ request }) => {\n * const { session } = await authenticate.public.appProxy(request);\n * return json(await getMyAppModelData({shop: session.shop));\n * };\n * ```\n */\n session: Session;\n\n /**\n * Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.\n */\n admin: AdminApiContext;\n}"
+ },
+ "AdminApiContext": {
+ "filePath": "/server/config-types.ts",
+ "name": "AdminApiContext",
+ "description": "",
+ "members": [
{
- "filePath": "/server/authenticate/admin/types.ts",
+ "filePath": "/server/config-types.ts",
"syntaxKind": "PropertySignature",
- "name": "session",
- "value": "Session",
- "description": "The session for the user who made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
+ "name": "rest",
+ "value": "RestClientWithResources",
+ "description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
"examples": [
{
- "description": "Getting your app's shop-specific widget data using an offline session",
+ "title": "Using REST resources",
+ "description": "Getting the number of orders in a store using REST resources.",
"tabs": [
{
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
+ "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "title": "/app/shopify.server.ts"
},
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({shop: session.shop));\n};",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
"title": "/app/routes/**\\/*.ts"
}
]
},
{
- "description": "Getting your app's user-specific widget data using an online session",
+ "title": "Performing a GET request to the REST API",
+ "description": "Use `admin.rest.` to make custom requests to the API.",
"tabs": [
{
- "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n\nconst shopify = shopifyApp({\n // ...etc\n useOnlineTokens: true,\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
- "title": "shopify.server.ts"
- },
- {
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session } = await authenticate.admin(request);\n return json(await getWidgets({user: session.onlineAccessInfo!.id}));\n};",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
"title": "/app/routes/**\\/*.ts"
}
]
@@ -5567,285 +1764,320 @@
]
},
{
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "AdminApiContext",
- "description": "Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request."
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "billing",
- "value": "BillingContext",
- "description": "Billing methods for this store, based on the plans defined in the `billing` config option.\n\n\n\n\n"
- },
- {
- "filePath": "/server/authenticate/admin/types.ts",
+ "filePath": "/server/config-types.ts",
"syntaxKind": "PropertySignature",
- "name": "cors",
- "value": "EnsureCORSFunction",
- "description": "A function that ensures the CORS headers are set correctly for the response.",
+ "name": "graphql",
+ "value": "GraphqlQueryFunction",
+ "description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
"examples": [
{
- "description": "Setting CORS headers for a admin request",
+ "title": "Querying the GraphQL API",
+ "description": "Use `admin.graphql` to make query / mutation requests.",
"tabs": [
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { session, cors } = await authenticate.admin(request);\n return cors(json(await getWidgets({user: session.onlineAccessInfo!.id})));\n};",
- "title": "/app/routes/admin/widgets.ts"
+ "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
+ "title": "Example"
}
]
}
]
}
],
- "value": "export interface EmbeddedAdminContext<\n Config extends AppConfigArg,\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends AdminContextInternal {\n /**\n * The decoded and validated session token for the request.\n *\n * Returned only if `isEmbeddedApp` is `true`.\n *\n * {@link https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload}\n *\n * @example\n * Getting your app's user-specific widget data using the session token\n * ```ts\n * // shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n *\n * const shopify = shopifyApp({\n * // ...etc\n * useOnlineTokens: true,\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken } = await authenticate.public(\n * request\n * );\n * return json(await getWidgets({user: sessionToken.sub}));\n * };\n * ```\n */\n sessionToken: JwtPayload;\n\n /**\n * A function that redirects the user to a new page, ensuring that the appropriate parameters are set for embedded\n * apps.\n *\n * Returned only if `isEmbeddedApp` is `true`.\n *\n * @example\n * Redirecting the user to the app's homepage\n * ```ts\n * // /app/routes/admin/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { session, redirect } = await authenticate.admin(request);\n * return redirect(\"/\");\n * };\n * ```\n *\n * @example\n * Redirecting outside of Shopify Admin\n * ```ts\n * // /app/routes/admin/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { session, redirect } = await authenticate.admin(request);\n * return redirect(\"/\", { target: '_parent' });\n * };\n * ```\n */\n redirect: RedirectFunction;\n}"
+ "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Using REST resources.\n * Getting the number of orders in a store using REST resources.\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API.\n * Use `admin.rest.` to make custom requests to the API.\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Querying the GraphQL API.\n * Use `admin.graphql` to make query / mutation requests.\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
},
- "RedirectFunction": {
- "filePath": "/server/authenticate/admin/helpers/redirect.ts",
- "name": "RedirectFunction",
+ "RestClientWithResources": {
+ "filePath": "/server/clients/admin/rest.ts",
+ "syntaxKind": "TypeAliasDeclaration",
+ "name": "RestClientWithResources",
+ "value": "RemixRestClient & {resources: Resources}",
+ "description": ""
+ },
+ "GraphqlQueryFunction": {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "name": "GraphqlQueryFunction",
"description": "",
"params": [
{
- "name": "url",
+ "name": "query",
"description": "",
"value": "string",
- "filePath": "/server/authenticate/admin/helpers/redirect.ts"
+ "filePath": "/server/clients/admin/graphql.ts"
},
{
- "name": "init",
+ "name": "options",
"description": "",
- "value": "RedirectInit",
+ "value": "QueryOptions",
"isOptional": true,
- "filePath": "/server/authenticate/admin/helpers/redirect.ts"
+ "filePath": "/server/clients/admin/graphql.ts"
}
],
"returns": {
- "filePath": "/server/authenticate/admin/helpers/redirect.ts",
+ "filePath": "/server/clients/admin/graphql.ts",
"description": "",
- "name": "TypedResponse",
- "value": "TypedResponse"
+ "name": "Promise",
+ "value": "Promise"
},
- "value": "export type RedirectFunction = (\n url: string,\n init?: RedirectInit,\n) => TypedResponse;"
- },
- "RedirectInit": {
- "filePath": "/server/authenticate/admin/helpers/redirect.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RedirectInit",
- "value": "number | (ResponseInit & {target?: RedirectTarget})",
- "description": ""
- },
- "RedirectTarget": {
- "filePath": "/server/authenticate/admin/helpers/redirect.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RedirectTarget",
- "value": "'_self' | '_parent' | '_top'",
- "description": ""
- },
- "RestResourcesType": {
- "filePath": "/server/types.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "RestResourcesType",
- "value": "Config['restResources'] extends ShopifyRestResources\n ? Config['restResources']\n : ShopifyRestResources",
- "description": ""
- },
- "AuthenticatePublic": {
- "filePath": "/server/authenticate/public/types.ts",
- "syntaxKind": "TypeAliasDeclaration",
- "name": "AuthenticatePublic",
- "value": "AuthenticateCheckout & AuthenticatePublicObject",
- "description": "Methods for authenticating Requests from Shopify's public surfaces\n\nTo maintain backwards compatability this is a function and an object.\n\nDo not use `authenticate.public()`. Use `authenticate.public.checkout()` instead.`authenticate.public()` will be removed in v2.\n\nMethods are:\n\n- `authenticate.public.checkout()` for authenticating requests from checkout extensions- `authenticate.public.appProxy()` for authenticating requests from app proxies"
+ "value": "export type GraphqlQueryFunction = (\n query: string,\n options?: QueryOptions,\n) => Promise;"
},
- "AuthenticateCheckout": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "name": "AuthenticateCheckout",
+ "QueryOptions": {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "name": "QueryOptions",
"description": "",
- "params": [
+ "members": [
{
- "name": "request",
+ "filePath": "/server/clients/admin/graphql.ts",
+ "syntaxKind": "PropertySignature",
+ "name": "variables",
+ "value": "QueryVariables",
"description": "",
- "value": "Request",
- "filePath": "/server/authenticate/public/checkout/types.ts"
+ "isOptional": true
},
{
- "name": "options",
+ "filePath": "/server/clients/admin/graphql.ts",
+ "syntaxKind": "PropertySignature",
+ "name": "apiVersion",
+ "value": "ApiVersion",
"description": "",
- "value": "AuthenticateCheckoutOptions",
- "isOptional": true,
- "filePath": "/server/authenticate/public/checkout/types.ts"
+ "isOptional": true
+ },
+ {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "syntaxKind": "PropertySignature",
+ "name": "headers",
+ "value": "{ [key: string]: any; }",
+ "description": "",
+ "isOptional": true
+ },
+ {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "syntaxKind": "PropertySignature",
+ "name": "tries",
+ "value": "number",
+ "description": "",
+ "isOptional": true
}
],
- "returns": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "description": "",
- "name": "Promise",
- "value": "Promise"
- },
- "value": "export type AuthenticateCheckout = (\n request: Request,\n options?: AuthenticateCheckoutOptions,\n) => Promise;"
+ "value": "interface QueryOptions {\n variables?: QueryVariables;\n apiVersion?: ApiVersion;\n headers?: {[key: string]: any};\n tries?: number;\n}"
},
- "AuthenticateCheckoutOptions": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "name": "AuthenticateCheckoutOptions",
+ "QueryVariables": {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "name": "QueryVariables",
"description": "",
"members": [
{
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "syntaxKind": "PropertySignature",
- "name": "corsHeaders",
- "value": "string[]",
- "description": "",
- "isOptional": true
+ "filePath": "/server/clients/admin/graphql.ts",
+ "name": "[key: string]",
+ "value": "any"
}
],
- "value": "export interface AuthenticateCheckoutOptions {\n corsHeaders?: string[];\n}"
- },
- "CheckoutContext": {
- "filePath": "/server/authenticate/public/checkout/types.ts",
- "name": "CheckoutContext",
- "description": "Authenticated Context for a checkout request",
+ "value": "interface QueryVariables {\n [key: string]: any;\n}"
+ }
+ }
+ },
+ {
+ "title": "AppProxyContext",
+ "description": "Object returned by `authenticate.public.appProxy`.",
+ "type": "AppProxyContextWithSession",
+ "typeDefinitions": {
+ "AppProxyContextWithSession": {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "name": "AppProxyContextWithSession",
+ "description": "",
"members": [
{
- "filePath": "/server/authenticate/public/checkout/types.ts",
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
"syntaxKind": "PropertySignature",
- "name": "sessionToken",
- "value": "JwtPayload",
- "description": "The decoded and validated session token for the request\n\nRefer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).",
+ "name": "session",
+ "value": "Session",
+ "description": "The session for the shop that made the request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n\nUse this to get shop or user-specific data.",
"examples": [
{
- "description": "Get store specific widget data using the session token",
+ "title": "Using the session object",
+ "description": "Get your app's data using an offline session for the shop that made the request.",
"tabs": [
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken } = await authenticate.public(\n request\n );\n return json(await getWidgets({shop: sessionToken.dest}));\n};",
- "title": "app/routes/public/widgets.ts"
+ "code": "import { json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppModelData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }) => {\n const { session } = await authenticate.public.appProxy(request);\n return json(await getMyAppModelData({shop: session.shop));\n};",
+ "title": "app/routes/**\\/.ts"
}
]
}
]
},
{
- "filePath": "/server/authenticate/public/checkout/types.ts",
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
"syntaxKind": "PropertySignature",
- "name": "cors",
- "value": "EnsureCORSFunction",
- "description": "A function that ensures the CORS headers are set correctly for the response.",
+ "name": "admin",
+ "value": "AdminApiContext",
+ "description": "Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request."
+ },
+ {
+ "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "syntaxKind": "PropertySignature",
+ "name": "liquid",
+ "value": "LiquidResponseFunction",
+ "description": "A utility for creating a Liquid Response.",
"examples": [
{
- "description": "Setting CORS headers for a public request",
+ "title": "Rendering liquid content",
+ "description": "Use the `liquid` helper to render a `Response` with Liquid content.",
"tabs": [
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getWidgets } from \"~/db/widgets.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken, cors } = await authenticate.public(\n request,\n { corsHeaders: [\"X-My-Custom-Header\"] }\n );\n const widgets = await getWidgets({shop: sessionToken.dest});\n return cors(json(widgets));\n};",
- "title": "app/routes/public/widgets.ts"
+ "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
+ "title": "app/routes/**\\/.ts"
}
]
}
]
}
],
- "value": "export interface CheckoutContext {\n /**\n * The decoded and validated session token for the request\n *\n * Refer to the OAuth docs for the [session token payload](https://shopify.dev/docs/apps/auth/oauth/session-tokens#payload).\n *\n * @example\n * Get store specific widget data using the session token\n * ```ts\n * // app/routes/public/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken } = await authenticate.public(\n * request\n * );\n * return json(await getWidgets({shop: sessionToken.dest}));\n * };\n * ```\n */\n sessionToken: JwtPayload;\n\n /**\n * A function that ensures the CORS headers are set correctly for the response.\n *\n * @example\n * Setting CORS headers for a public request\n * ```ts\n * // app/routes/public/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getWidgets } from \"~/db/widgets.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken, cors } = await authenticate.public(\n * request,\n * { corsHeaders: [\"X-My-Custom-Header\"] }\n * );\n * const widgets = await getWidgets({shop: sessionToken.dest});\n * return cors(json(widgets));\n * };\n * ```\n */\n cors: EnsureCORSFunction;\n}"
+ "value": "export interface AppProxyContextWithSession<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> extends Context {\n /**\n * The session for the shop that made the request.\n *\n * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n *\n * Use this to get shop or user-specific data.\n *\n * @example\n * Using the session object.\n * Get your app's data using an offline session for the shop that made the request.\n * ```ts\n * // app/routes/**\\/.ts\n * import { json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n * import { getMyAppModelData } from \"~/db/model.server\";\n *\n * export const loader = async ({ request }) => {\n * const { session } = await authenticate.public.appProxy(request);\n * return json(await getMyAppModelData({shop: session.shop));\n * };\n * ```\n */\n session: Session;\n\n /**\n * Methods for interacting with the GraphQL / REST Admin APIs for the store that made the request.\n */\n admin: AdminApiContext;\n}"
},
- "AuthenticatePublicObject": {
- "filePath": "/server/authenticate/public/types.ts",
- "name": "AuthenticatePublicObject",
+ "AdminApiContext": {
+ "filePath": "/server/config-types.ts",
+ "name": "AdminApiContext",
"description": "",
"members": [
{
- "filePath": "/server/authenticate/public/types.ts",
+ "filePath": "/server/config-types.ts",
"syntaxKind": "PropertySignature",
- "name": "checkout",
- "value": "AuthenticateCheckout",
- "description": "Authenticate a request from a checkout extension",
+ "name": "rest",
+ "value": "RestClientWithResources",
+ "description": "Methods for interacting with the REST Admin API.\n\nThere are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n\n\n\n\n",
"examples": [
{
- "description": "Authenticating a checkout extension request",
+ "title": "Using REST resources",
+ "description": "Getting the number of orders in a store using REST resources.",
"tabs": [
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { sessionToken, cors } = await authenticate.public.checkout(\n request,\n );\n return cors(json({my: \"data\", shop: sessionToken.dest}));\n};",
- "title": "/app/routes/public/widgets.ts"
+ "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "title": "/app/shopify.server.ts"
+ },
+ {
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
+ "title": "/app/routes/**\\/*.ts"
+ }
+ ]
+ },
+ {
+ "title": "Performing a GET request to the REST API",
+ "description": "Use `admin.rest.` to make custom requests to the API.",
+ "tabs": [
+ {
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
+ "title": "/app/routes/**\\/*.ts"
}
]
}
]
},
{
- "filePath": "/server/authenticate/public/types.ts",
+ "filePath": "/server/config-types.ts",
"syntaxKind": "PropertySignature",
- "name": "appProxy",
- "value": "AuthenticateAppProxy",
- "description": "Authenticate a request from an app proxy",
+ "name": "graphql",
+ "value": "GraphqlQueryFunction",
+ "description": "Methods for interacting with the GraphQL Admin API.\n\n\n\n\n\n\n\n\n\n",
"examples": [
{
- "description": "Authenticating an app proxy request",
+ "title": "Querying the GraphQL API",
+ "description": "Use `admin.graphql` to make query / mutation requests.",
"tabs": [
{
- "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n await authenticate.public.appProxy(\n request,\n );\n\n const {searchParams} = new URL(request.url);\n const shop = searchParams.get(\"shop\");\n const customerId = searchParams.get(\"logged_in_customer_id\")\n\n return json({my: \"data\", shop, customerId});\n};",
- "title": "/app/routes/public/widgets.ts"
+ "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
+ "title": "Example"
}
]
}
]
}
],
- "value": "interface AuthenticatePublicObject {\n /**\n * Authenticate a request from a checkout extension\n *\n * @example\n * Authenticating a checkout extension request\n * ```ts\n * // /app/routes/public/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { sessionToken, cors } = await authenticate.public.checkout(\n * request,\n * );\n * return cors(json({my: \"data\", shop: sessionToken.dest}));\n * };\n * ```\n */\n checkout: AuthenticateCheckout;\n\n /**\n * Authenticate a request from an app proxy\n *\n * @example\n * Authenticating an app proxy request\n * ```ts\n * // /app/routes/public/widgets.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * await authenticate.public.appProxy(\n * request,\n * );\n *\n * const {searchParams} = new URL(request.url);\n * const shop = searchParams.get(\"shop\");\n * const customerId = searchParams.get(\"logged_in_customer_id\")\n *\n * return json({my: \"data\", shop, customerId});\n * };\n * ```\n */\n appProxy: AuthenticateAppProxy;\n}"
+ "value": "export interface AdminApiContext<\n Resources extends ShopifyRestResources = ShopifyRestResources,\n> {\n /**\n * Methods for interacting with the REST Admin API.\n *\n * There are methods for interacting with individual REST resources. You can also make `GET`, `POST`, `PUT` and `DELETE` requests should the REST resources not meet your needs.\n *\n * {@link https://shopify.dev/docs/api/admin-rest}\n *\n * @example\n * Using REST resources.\n * Getting the number of orders in a store using REST resources.\n *\n * ```ts\n * // /app/shopify.server.ts\n * import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\n * import { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n *\n * const shopify = shopifyApp({\n * restResources,\n * // ...etc\n * });\n * export default shopify;\n * export const authenticate = shopify.authenticate;\n * ```\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * return json(admin.rest.resources.Order.count({ session }));\n * };\n * ```\n *\n * @example\n * Performing a GET request to the REST API.\n * Use `admin.rest.` to make custom requests to the API.\n *\n * ```ts\n * // /app/routes/**\\/*.ts\n * import { LoaderArgs, json } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export const loader = async ({ request }: LoaderArgs) => {\n * const { admin, session } = await authenticate.admin(request);\n * const response = await admin.rest.get({ path: \"/customers/count.json\" });\n * const customers = await response.json();\n * return json({ customers });\n * };\n * ```\n */\n rest: RestClientWithResources;\n\n /**\n * Methods for interacting with the GraphQL Admin API.\n *\n * {@link https://shopify.dev/docs/api/admin-graphql}\n * {@link https://github.com/Shopify/shopify-api-js/blob/main/docs/reference/clients/Graphql.md}\n *\n * @example\n * Querying the GraphQL API.\n * Use `admin.graphql` to make query / mutation requests.\n * ```ts\n * import { ActionArgs } from \"@remix-run/node\";\n * import { authenticate } from \"../shopify.server\";\n *\n * export async function action({ request }: ActionArgs) {\n * const { admin } = await authenticate.admin(request);\n *\n * const response = await admin.graphql(\n * `#graphql\n * mutation populateProduct($input: ProductInput!) {\n * productCreate(input: $input) {\n * product {\n * id\n * }\n * }\n * }`,\n * { variables: { input: { title: \"Product Name\" } } }\n * );\n *\n * const productData = await response.json();\n * return json({ data: productData.data });\n * }\n * ```\n */\n graphql: GraphqlQueryFunction;\n}"
+ },
+ "RestClientWithResources": {
+ "filePath": "/server/clients/admin/rest.ts",
+ "syntaxKind": "TypeAliasDeclaration",
+ "name": "RestClientWithResources",
+ "value": "RemixRestClient & {resources: Resources}",
+ "description": ""
},
- "AuthenticateAppProxy": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "AuthenticateAppProxy",
+ "GraphqlQueryFunction": {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "name": "GraphqlQueryFunction",
"description": "",
"params": [
{
- "name": "request",
+ "name": "query",
"description": "",
- "value": "Request",
- "filePath": "/server/authenticate/public/appProxy/types.ts"
+ "value": "string",
+ "filePath": "/server/clients/admin/graphql.ts"
+ },
+ {
+ "name": "options",
+ "description": "",
+ "value": "QueryOptions",
+ "isOptional": true,
+ "filePath": "/server/clients/admin/graphql.ts"
}
],
"returns": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "filePath": "/server/clients/admin/graphql.ts",
"description": "",
- "name": "Promise",
- "value": "Promise"
+ "name": "Promise",
+ "value": "Promise"
},
- "value": "export type AuthenticateAppProxy = (\n request: Request,\n) => Promise;"
+ "value": "export type GraphqlQueryFunction = (\n query: string,\n options?: QueryOptions,\n) => Promise;"
},
- "AppProxyContext": {
- "filePath": "/server/authenticate/public/appProxy/types.ts",
- "name": "AppProxyContext",
+ "QueryOptions": {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "name": "QueryOptions",
"description": "",
"members": [
{
- "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "filePath": "/server/clients/admin/graphql.ts",
"syntaxKind": "PropertySignature",
- "name": "session",
- "value": "undefined",
- "description": "No session is available for the shop that made this request.\n\nThis comes from the session storage which `shopifyApp` uses to store sessions in your database of choice."
+ "name": "variables",
+ "value": "QueryVariables",
+ "description": "",
+ "isOptional": true
},
{
- "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "filePath": "/server/clients/admin/graphql.ts",
"syntaxKind": "PropertySignature",
- "name": "admin",
- "value": "undefined",
- "description": "No session is available for the shop that made this request.Therefore no methods for interacting with the GraphQL / REST Admin APIs are available."
+ "name": "apiVersion",
+ "value": "ApiVersion",
+ "description": "",
+ "isOptional": true
},
{
- "filePath": "/server/authenticate/public/appProxy/types.ts",
+ "filePath": "/server/clients/admin/graphql.ts",
"syntaxKind": "PropertySignature",
- "name": "liquid",
- "value": "LiquidResponseFunction",
- "description": "A utility for creating a Liquid Response.",
- "examples": [
- {
- "description": "Returning a Liquid Response from an app proxy route",
- "tabs": [
- {
- "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
- "title": "app/routes/**\\/.ts"
- }
- ]
- }
- ]
+ "name": "headers",
+ "value": "{ [key: string]: any; }",
+ "description": "",
+ "isOptional": true
+ },
+ {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "syntaxKind": "PropertySignature",
+ "name": "tries",
+ "value": "number",
+ "description": "",
+ "isOptional": true
}
],
- "value": "export interface AppProxyContext extends Context {\n /**\n * No session is available for the shop that made this request.\n *\n * This comes from the session storage which `shopifyApp` uses to store sessions in your database of choice.\n */\n session: undefined;\n\n /**\n * No session is available for the shop that made this request.\n * Therefore no methods for interacting with the GraphQL / REST Admin APIs are available.\n */\n admin: undefined;\n}"
+ "value": "interface QueryOptions {\n variables?: QueryVariables;\n apiVersion?: ApiVersion;\n headers?: {[key: string]: any};\n tries?: number;\n}"
+ },
+ "QueryVariables": {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "name": "QueryVariables",
+ "description": "",
+ "members": [
+ {
+ "filePath": "/server/clients/admin/graphql.ts",
+ "name": "[key: string]",
+ "value": "any"
+ }
+ ],
+ "value": "interface QueryVariables {\n [key: string]: any;\n}"
},
"LiquidResponseFunction": {
"filePath": "/server/authenticate/public/appProxy/types.ts",
@@ -5889,58 +2121,280 @@
}
],
"value": "interface Options {\n layout?: boolean;\n}"
+ }
+ }
+ }
+ ],
+ "jsDocTypeExamples": [
+ "AppProxyContextWithSession",
+ "AdminApiContext"
+ ],
+ "related": [
+ {
+ "name": "API context",
+ "subtitle": "Interact with the Admin API.",
+ "url": "/docs/api/shopify-app-remix/apis/admin-api"
+ }
+ ],
+ "examples": {
+ "description": "",
+ "exampleGroups": [
+ {
+ "title": "session",
+ "examples": [
+ {
+ "description": "Get your app's data using an offline session for the shop that made the request.",
+ "codeblock": {
+ "title": "Using the session object",
+ "tabs": [
+ {
+ "title": "app/routes/**\\/.ts",
+ "code": "import { json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\nimport { getMyAppModelData } from \"~/db/model.server\";\n\nexport const loader = async ({ request }) => {\n const { session } = await authenticate.public.appProxy(request);\n return json(await getMyAppModelData({shop: session.shop));\n};",
+ "language": "typescript"
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "title": "liquid",
+ "examples": [
+ {
+ "description": "Use the `liquid` helper to render a `Response` with Liquid content.",
+ "codeblock": {
+ "title": "Rendering liquid content",
+ "tabs": [
+ {
+ "title": "app/routes/**\\/.ts",
+ "code": "import {authenticate} from \"~/shopify.server\"\n\nexport async function loader({ request }) {\n const {liquid} = authenticate.public.appProxy(request);\n\n return liquid(\"Hello {{shop.name}}\")\n}",
+ "language": "typescript"
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "title": "rest",
+ "examples": [
+ {
+ "description": "Getting the number of orders in a store using REST resources.",
+ "codeblock": {
+ "title": "Using REST resources",
+ "tabs": [
+ {
+ "title": "/app/shopify.server.ts",
+ "code": "import { shopifyApp } from \"@shopify/shopify-app-remix/server\";\nimport { restResources } from \"@shopify/shopify-api/rest/admin/2023-07\";\n\nconst shopify = shopifyApp({\n restResources,\n // ...etc\n});\nexport default shopify;\nexport const authenticate = shopify.authenticate;",
+ "language": "typescript"
+ },
+ {
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n return json(admin.rest.resources.Order.count({ session }));\n};",
+ "language": "typescript"
+ }
+ ]
+ }
+ },
+ {
+ "description": "Use `admin.rest.` to make custom requests to the API.",
+ "codeblock": {
+ "title": "Performing a GET request to the REST API",
+ "tabs": [
+ {
+ "title": "/app/routes/**\\/*.ts",
+ "code": "import { LoaderArgs, json } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport const loader = async ({ request }: LoaderArgs) => {\n const { admin, session } = await authenticate.admin(request);\n const response = await admin.rest.get({ path: \"/customers/count.json\" });\n const customers = await response.json();\n return json({ customers });\n};",
+ "language": "typescript"
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "title": "graphql",
+ "examples": [
+ {
+ "description": "Use `admin.graphql` to make query / mutation requests.",
+ "codeblock": {
+ "title": "Querying the GraphQL API",
+ "tabs": [
+ {
+ "title": "Example",
+ "code": "import { ActionArgs } from \"@remix-run/node\";\nimport { authenticate } from \"../shopify.server\";\n\nexport async function action({ request }: ActionArgs) {\n const { admin } = await authenticate.admin(request);\n\n const response = await admin.graphql(\n `#graphql\n mutation populateProduct($input: ProductInput!) {\n productCreate(input: $input) {\n product {\n id\n }\n }\n }`,\n { variables: { input: { title: \"Product Name\" } } }\n );\n\n const productData = await response.json();\n return json({ data: productData.data });\n}",
+ "language": "typescript"
+ }
+ ]
+ }
+ }
+ ]
+ }
+ ]
+ }
+ },
+ {
+ "name": "Checkout",
+ "description": "The `authenticate.public.checkout` function ensures that checkout extension requests are coming from Shopify, and returns helpers to respond with the correct headers.",
+ "category": "Authenticate",
+ "subCategory": "Public",
+ "type": "object",
+ "isVisualComponent": false,
+ "definitions": [
+ {
+ "title": "authenticate.public.checkout",
+ "description": "Authenticates requests coming from Shopify checkout extensions.",
+ "type": "AuthenticateCheckout",
+ "typeDefinitions": {
+ "AuthenticateCheckout": {
+ "filePath": "/server/authenticate/public/checkout/types.ts",
+ "name": "AuthenticateCheckout",
+ "description": "",
+ "params": [
+ {
+ "name": "request",
+ "description": "",
+ "value": "Request",
+ "filePath": "/server/authenticate/public/checkout/types.ts"
+ },
+ {
+ "name": "options",
+ "description": "",
+ "value": "AuthenticateCheckoutOptions",
+ "isOptional": true,
+ "filePath": "/server/authenticate/public/checkout/types.ts"
+ }
+ ],
+ "returns": {
+ "filePath": "/server/authenticate/public/checkout/types.ts",
+ "description": "",
+ "name": "Promise",
+ "value": "Promise