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

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

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

<Overview>
  This guide is the fourth part of a five-part tutorial series that describes how to build UI extensions that display as actions and blocks in Shopify admin. Before starting this guide, you'll need to build or copy the code for the issue tracker UI extensions from the [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 admin action UI 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 UI extension, so that your action can fetch the data when a merchant presses a button

  - Run the UI 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 the [admin action tutorial](/docs/apps/build/admin/actions-blocks/build-admin-action), the [admin block tutorial](/docs/apps/build/admin/actions-blocks/build-admin-block), and the [tutorial about connecting admin UI extensions](/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" />
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/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 your UI extension's action

    Now that your app has an API to return a suggestion, you can call it from the app's admin action UI 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" tabTitle="ActionExtension.jsx" tag="connect-backend.call-backend" displayPath="src/ActionExtension.jsx"/>
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/blob/main/extensions/issue-tracker-action/src/ActionExtension-backend.jsx" tabTitle="ActionExtension.jsx" tag="connect-backend.call-backend" displayPath="src/ActionExtension.jsx"/>
      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 UI extension

    <Substep>
      After you've updated the UI 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. On the Dev Console page, click on the preview link for the issue tracker UI 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 UI extension, in the top right of the page click the **More actions** dropdown list and select your UI extension.

      ![A merchant automatically generating an issue title and description in an admin action UI 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 blocks and actions

      Complete the next guide in this tutorial series to conditionally hide UI extensions.
    </LinkCard>
    <LinkCard href="/docs/api/admin-extensions">
      #### Admin UI 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 UI extensions to merchants.
    </LinkCard>
  </CardGrid>
</NextSteps>