Connect the frontend to the backend and test the app

Now that you have a backend to serve the QR code form, you'll update the Edit QR code page with the logic to fetch data.

useAppQuery is responsible for making REST API calls to the app backend and provides the following functionality:

• Uses App Bridge to ensure that a request is authenticated with a session token. It checks the response to determine if a session is valid and redirects invalid sessions to an authentication flow.
• Configures useQuery with that authenticated fetch method and any fetch options you pass.
• Configures useQuery with any reactQuery options you pass.

1. Open the /web/frontend/pages/qrcodes/[id].jsx file.

2. Import the following hooks and components:

3. Delete the temporary code and replace it with code that queries the QR code with the ID in the URL:

In this step, you'll update the QR code form to connect with the backend APIs to save, delete, and add discounts to QR codes.

The onSubmit callback fires when the merchant clicks Save. The onSubmit callback accepts the body, or form data, and manipulates it to send it to the backend API.

1. Open the /web/frontend/components/QRCodeForm.jsx file.

2. Delete the temporary code and replace it with the onSubmit callback code:

Add the deleteQRCode callback that fires when a merchant clicks Delete QR code.

1. Still in the /web/frontend/components/QRCodeForm.jsx file, delete the temporary code and replace it with the deleteQRCode callback code:

In this step you'll add code to handle discounts, which are queried from the online store using the GraphQL Admin API.

The QR code app requires access to the discounts in the store so that users can select discounts to include in QR codes. To get access to discounts, the app needs to request the read_discounts access scope so that it can retrieve discount information from the GraphQL Admin API.

1. From your app root, open shopify.app.toml.

2. Add read_discounts to the scope property:

3. In a terminal, shut down your development server using CTRL + C. Then restart it to request the new access scope:

In this step, you'll add the code to enable selecting discounts inside the QR code form. The discount codes are fetched from the /api/discounts endpoint in the backend.

1. Still in the /web/frontend/components/QRCodeForm.jsx file, delete the temporary discounts code and replace it with the code that queries discounts:

In this step, you'll add useAppQuery to query data from the backend to display the QR code list on the app's home page.

The app uses a "stale while revalidate" caching strategy. If the merchant has already visited the page, then the app can show data immediately, while performing a new request to get the latest version. The Loading qr codes... state displays to the merchant.

1. Open the /web/frontend/pages/index.jsx file.

2. Import the useAppQuery hook:

3. Delete the temporary code and replace it with code that queries the QR code data for the list view:

In this step, you'll add the code to preview, download and scan QR codes. You'll also add some backend APIs that will be publicly available.

Add qrcode to your dependencies. The qrcode package is used to manage and generate QR codes.

1. In a terminal, navigate to your app's /web/ directory:

2. Run your package manager's install command to install the dependencies:

1. In the /web/middleware/ directory, create a new file called qr-code-public.js.

2. Copy and paste the following code into the new file:

1. Open the web/index.js file.

2. Import the middleware public endpoints function you created in the previous step:

3. Add the following code directly before the call to app.use("/api/*", shopify.validateAuthenticatedSession());. Because the endpoints to load the QR code image and destination are public, they don't require an active Shopify session:

Any routes that don't start with /api are handled by the client by default, so you'll add some proxy rules to handle the /qrcodes/ URLs.

1. Open the web/frontend/vite.config.js file.

2. Add the /qrcodes/ proxy rules in the server object within the defineConfig helper:

You can test the app by creating a QR code and downloading it. You can also check that the QR code works by scanning it with your mobile device.

1. Create and save a QR code using the app.
2. Test the download functionality:
   1. Click Download.
   2. Check that your browser downloaded the QR code image file.
3. Test the scan functionality:
   1. Log in to your test store from your mobile device browser. You can find the password for your test store from the Preferences page of the Online Store channel in the Shopify admin.
   2. Point the mobile device camera at the QR code and go to the URL.

The URL takes you to the product page or to the checkout according to how you configured the QR code. If you get a 404 error in your browser, then make sure that you published the product to your online store.

You created a working app using some patterns, components, and features that are common in Shopify apps.

• Use webhooks to stay in sync with Shopify or execute code after a specific event occurs in a shop.
• Identify your app business model and learn how to use the Billing API to bill customers with recurring monthly charges or one-time purchases.
• Learn how to use app extensions to add features to Shopify admin or Shopify Point of Sale (POS).
• Explore the GraphQL Admin API and REST Admin API references.
• Learn how to deploy your app.