---
gid: 752b22a3-5ae1-4cb0-8e9d-499f260f2a5e
title: Connect to your app's backend
description: Learn how to use connect your extensions to your app's backend.
---

<Repo extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react" />

<Picker name="extension">
  <PickerOption name="react" />
</Picker>

<Overview>
  This guide is the fourth part in a five-part tutorial series on how to build a feature using admin action and block extensions. Before starting this guide, you'll need to build or copy the code for the issue tracker action and block from [previous section](/docs/apps/build/admin/actions-blocks/connect-admin-extensions) of the tutorial.

  So far you've used [direct API access](/docs/api/admin-extensions#direct-api-access) to interact with the GraphQL Admin API. However, your app may have data or functionality that can only be accessed from your app's backend. This tutorial will demonstrate how to fetch data from your app's backend in an admin UI extension.

  To demonstrate this, we'll build a new **Generate issue** button that populates an issue's title and description with suggested values from the app's backend.

  ![An issue title and description automatically generated with an action extension.](/assets/admin/admin-actions-and-block/connect-extension-and-backend/connect-extension-and-backend.png)

  ## What you'll learn

  In this tutorial, you'll learn how to do the following tasks:

  - Create a resource route in the Remix app template that an admin UI extension can use to fetch data

  - Update your admin action extension, so that it can fetch the data when a user presses a button

  - Run the extensions locally and test them on a development store
</Overview>

<Requirements>
  <Requirement href="/docs/apps/admin/admin-actions-and-blocks" label="Tutorials">
    You've completed or copied the code from [Getting started with admin actions](/docs/apps/build/admin/actions-blocks/build-admin-action),  [Getting started with admin blocks](/docs/apps/build/admin/actions-blocks/build-admin-block), and [Getting started with connecting admin blocks and actions](/docs/apps/build/admin/actions-blocks/connect-admin-extensions).
  </Requirement>

</Requirements>

<StepSection>
  <Step>
    ## Create a new resource route that returns data

    Create a [resource route](https://remix.run/docs/en/main/guides/resource-routes#creating-resource-routes) in your app, by creating a new route file that doesn't export a default component. This route will return suggested issue titles and descriptions.

    When you're returning data from this route, you should wrap the response with the [`cors` helper](/docs/api/shopify-app-remix/v2/authenticate/admin#example-cors) that's returned from the [`authenticate.admin()` function](/docs/api/shopify-app-remix/v2/authenticate/admin#authenticate.admin).

    Shopify extensions are hosted on a separate domain, so this route is inaccessible if you don't set the correct CORS headers with this method.

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/app/routes/api.recommendedProductIssue.js" tag="connect-backend.create-route" />

      Create and return a list of product issues from your new route.
    </Substep>
  </Step>

  <Step>
    ## Call the route from the action extension

    Now that your app has an API to return a suggestion, you can call it from the app's action extension and use the provided data to populate the extension's title and description fields.

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-action/src/ActionExtension-backend.jsx" tag="connect-backend.call-backend"/>

      Admin UI extensions can [make calls to your app's backend](/docs/api/admin-extensions#app-authentication) by using `fetch()`. The extension automatically adds the correct authorization header, manages session tokens, and resolves any relative paths against your app's `app_url`.
    </Substep>
  </Step>

   <Step>
    ## Test the extension

    <Substep>
      After you've updated the extension, test it with the following steps:

      1.  Navigate to your app directory:

          <Codeblock terminal>
            ```bash
            cd <directory>
            ```
          </Codeblock>

      2.  To build and preview your app, either start or restart your server with the following command:

          <Codeblock terminal>
            ```bash
            shopify app dev
            ```
          </Codeblock>

      3. Press `p` to open the developer console.

      4. In the developer console page, click on the preview link for the issue tracker action extension. The product details page opens. If you don't have a product in your store, then you need to create one.

      5. To launch your extension, in the top right of the page click the **More actions** dropdown list and select your extension.

      ![A buyer automatically generating an issue title and description in an action extension.](/assets/admin/admin-actions-and-block/connect-extension-and-backend/connect-extension-and-backend.png)

      6. In the banner, click **Generate issue**. The issue's title and description are populated with data from your app's backend.
    </Substep>
  </Step>
</StepSection>

<NextSteps>
  ### Next steps

  <CardGrid>
      <LinkCard href="/docs/apps/build/admin/actions-blocks/hide-extensions">
      #### Conditionally hide admin block and action extensions

      Complete the next guide in this tutorial series to conditionally hide extensions.
    </LinkCard>
    <LinkCard href="/docs/api/admin-extensions">
      #### Admin extension APIs

      Learn about the admin UI extension APIs.
    </LinkCard>

    <LinkCard href="https://github.com/Shopify/ui-extensions">
      #### Participate

      File any issues or feature requests on the [UI Extensions GitHub repository](https://github.com/Shopify/ui-extensions).
    </LinkCard>

    <LinkCard href="/docs/apps/deployment/app-versions">
      #### Deploy

      Learn how to deploy your extension to merchants.
    </LinkCard>
  </CardGrid>
</NextSteps>