shopify-app-js

repository·main·Indexed 19 days ago

https://github.com/shopify/shopify-app-js

A monorepo of JavaScript and TypeScript tools for building Shopify apps. It includes API clients for Admin (GraphQL and REST), Storefront, and GraphQL, app frameworks for Remix and Express, and various session storage implementations. Key packages include @shopify/admin-api-client for interacting with Shopify's Admin API and @shopify/api-codegen-preset for generating TypeScript types for GraphQL operations.

Tokens
153.1K
Snippets
465
Records
602
Agent score
68%

What's inside shopify-app-js

  1. Overview of Shopify API and app tools for JavaScript

    main

    This repository is a monorepo containing various TypeScript and JavaScript packages designed to help developers interact with Shopify's APIs and build Shopify apps. The tools are categorized into three main areas: API clients for direct interaction, Apps and middlewares for building full applications, and Session storage implementations for managing app sessions.

    API Clients

    Used to interact with Shopify APIs when you have the required access tokens.

    • @shopify/admin-api-client: Client for GraphQL and REST Admin APIs.
    • @shopify/storefront-api-client: Client for the GraphQL Storefront API.
    • @shopify/graphql-client: A generic GraphQL API client.
    • @shopify/api-codegen-preset: A GraphQL Codegen preset that integrates with the clients above.

    Apps and Middlewares

    Used to build Shopify apps using specific technology stacks.

    • @shopify/shopify-api: A framework-agnostic library for Shopify OAuth, APIs, webhooks, and more.
    • @shopify/shopify-app-remix: An implementation of @shopify/shopify-api specifically for Remix.
    • @shopify/shopify-app-express: An implementation of @shopify/shopify-api specifically for Express.

    Session Storage

    Database-specific implementations to manage @shopify/shopify-api sessions. The base interface is provided by @shopify/shopify-app-session-storage. Available implementations include:

    • Drizzle (@shopify/shopify-app-session-storage-drizzle)
    • DynamoDB (@shopify/shopify-app-session-storage-dynamodb)
    • Cloudflare KV (@shopify/shopify-app-session-storage-kv)
    • Memory (@shopify/shopify-app-session-storage-memory)
    • MongoDB (@shopify/shopify-app-session-storage-mongodb)
    • MySQL (@shopify/shopify-app-session-storage-mysql)
    • PostgreSQL (@shopify/shopify-app-session-storage-postgresql)
    • Prisma (@shopify/shopify-app-session-storage-prisma)
    • Redis (@shopify/shopify-app-session-storage-redis)
    • SQLite (@shopify/shopify-app-session-storage-sqlite)
  2. Overview of Shopify API clients

    main

    The api-clients packages provide specialized clients for making requests to Shopify's APIs. These clients are designed to work on any JavaScript runtime that provides a fetch API implementation, provided you have the necessary access tokens.

    Use these clients to interact with:

    • Admin APIs (GraphQL and REST)
    • Storefront API (GraphQL)
    • Generic GraphQL APIs
  3. Manage billing with shopify.billing

    main

    The shopify.billing object provides functions to manage merchant payments, including checking existing plans, requesting new payments, canceling subscriptions, and managing usage-based billing.

    Important Requirement: This package uses the GraphQL Admin API. Consequently, your app must complete the OAuth process before it can successfully request or look up payments for a merchant.

  4. Use shopify.utils for generic helper functions

    main

    The shopify.utils object provides a collection of helper functions designed to simplify common tasks in Shopify app development, such as input sanitization, security validation, and API version compatibility checks.

    Available utilities include:

    • sanitizeShop: Validates and sanitizes Shopify shop domains to ensure user input is safe.
    • sanitizeHost: Validates and sanitizes the host argument provided by Shopify for embedded apps.
    • validateHmac: Validates the HMAC signature in incoming requests from Shopify to ensure authenticity.
    • versionCompatible: Checks if the current library version is equal to or newer than a specified API version.
    • versionPriorTo: Checks if the current library version is older than a specified API version.
  5. Configure App Billing with Shopify

    main

    Shopify provides two primary ways for app partners to charge merchants, allowing payments to be processed through Shopify Payments:

    1. Shopify managed app pricing: The easiest method. You set up plans, and Shopify hosts the selection page for merchants. This requires no specific billing configuration in your app setup, though you can use the check method to retrieve plans for the current merchant.
    2. Admin billing API: Used to trigger specific purchases (subscriptions or one-time charges) directly within the Shopify platform via the API.
  6. Choose a Shopify app framework package

    main

    The shopify-app-js repository provides several packages for building Shopify apps depending on your preferred runtime or framework:

    • @shopify/shopify-api: A framework and runtime agnostic library. Use this if you want to build apps using pure TypeScript/JavaScript or if you are using a custom framework. It handles Shopify OAuth, APIs, webhooks, and more.
    • @shopify/shopify-app-remix: A specialized implementation of @shopify/shopify-api designed specifically to simplify app development using the Remix framework.
    • @shopify/shopify-app-express: A specialized implementation of @shopify/shopify-api designed specifically for use with the Express framework.
  7. Configure and process shop-specific webhooks with shopify.webhooks

    main

    The shopify.webhooks object provides a suite of functions for managing shop-specific webhooks. This includes adding event handlers, registering those subscriptions with Shopify, and validating/processing incoming webhook requests.

    Important Note on Webhook Types: Most functions in this object are intended for shop-specific webhooks. If your application only uses app-specific webhooks, you should instead use shopify.webhooks.validate to verify the authenticity of the requests. For a detailed comparison, see the App-specific vs shop-specific webhooks guide.

  8. Use shopify.clients to interact with Shopify APIs

    main

    The shopify.clients object provides specialized client classes for interacting with different Shopify APIs. Depending on your requirements, you can use these clients to perform administrative tasks or storefront operations:

    • Rest: Use the Rest class to interact with the Shopify Admin REST API.
    • Graphql: Use the Graphql class to interact with the Shopify Admin GraphQL API.
    • Storefront: Use the Storefront class to interact with the Shopify Storefront API.
    • graphqlProxy: Use the graphqlProxy function to create a proxy that forwards requests to the GraphQL API and returns the response from Shopify.
  9. Explore the @shopify/shopify-api library structure

    main

    The @shopify/shopify-api library is the central entry point for interacting with Shopify. It exports a main object (typically initialized via shopifyApi) that provides access to several specialized modules for different app functionalities.

    Key modules available through the library include:

    • auth: Functions for authenticating with Shopify APIs.
    • clients: Clients used to make requests to Shopify APIs (e.g., Admin or Storefront).
    • session: Functions for managing Shopify sessions.
    • webhooks: Tools to configure and handle Shopify webhooks.
    • billing: Functions to enable app billing for merchants.
    • utils: General utility functions for app development.
    • rest: Object-oriented representations of the Admin REST API.
  10. Understand refresh token availability and backward compatibility

    main

    When expiringOfflineAccessTokens is enabled in your configuration:

    • Session Object: The refresh token is available directly on the Session object.
    • New Sessions: New OAuth flows will automatically store the refresh token in the new database columns.
    • Existing Sessions: Existing sessions remain functional; the new database columns are nullable, so old sessions without refresh tokens are unaffected.
    • Backward Compatibility: If you do not enable expiringOfflineAccessTokens, the app will not store or use refresh tokens, and the storeSession method will continue to function normally without the new fields.