Connect the frontend to the backend and test the app
This section is part of a larger tutorial to build a QR code example app. You need to build the frontend and build the backend before starting these tasks.
In this section, you'll connect the frontend of the app with the backend functions and APIs. In some cases you'll replace placeholder code and mock data with functional code.
At the end of this section of the tutorial, you'll have a working QR code app to try out.
Step 1: Update the edit page to get the QR code data
Anchor link to section titled "Step 1: Update the edit page to get the QR code data"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 anyreactQuery
options you pass.
Open the
/web/frontend/pages/qrcodes/[id].jsx
file.Import the following hooks and components:
Delete the temporary code and replace it with code that queries the QR code with the ID in the URL:
Step 2: Connect the frontend to the backend code
Anchor link to section titled "Step 2: Connect the frontend to the backend code"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.
Save QR codes
Anchor link to section titled "Save 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.
- Open the
/web/frontend/components/QRCodeForm.jsx
file. Delete the temporary code and replace it with the
onSubmit
callback code:
Delete QR codes
Anchor link to section titled "Delete QR codes"Add the deleteQRCode
callback that fires when a merchant clicks Delete QR code.
Still in the
/web/frontend/components/QRCodeForm.jsx
file, delete the temporary code and replace it with thedeleteQRCode
callback code:
Step 3: Connect and add code to handle discounts
Anchor link to section titled "Step 3: Connect and add code to handle discounts"In this step you'll add code to handle discounts, which are queried from the online store using the GraphQL Admin API.
Add a new access scope
Anchor link to section titled "Add a new access scope"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.
- From your app root, open
shopify.app.toml
. Add
read_discounts
to thescope
property:In a terminal, shut down your development server using
CTRL
+C
. Then restart it to request the new access scope:
Connect the frontend and backend code to show and select discounts
Anchor link to section titled "Connect the frontend and backend code to show and select discounts"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.
Still in the
/web/frontend/components/QRCodeForm.jsx
file, delete the temporary discounts code and replace it with the code that queries discounts:
Step 4: Connect the list view to display saved QR codes
Anchor link to section titled "Step 4: Connect the list view to display saved QR codes"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.
- Open the
/web/frontend/pages/index.jsx
file. Import the
useAppQuery
hook:Delete the temporary code and replace it with code that queries the QR code data for the list view:
Step 5: Add code for QR code images
Anchor link to section titled "Step 5: Add code for QR code images"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 dependencies
Anchor link to section titled "Add dependencies"Add qrcode
to your dependencies. The qrcode
package is used to manage and generate QR codes.
In a terminal, navigate to your app's
/web/
directory:Run your package manager's install command to install the dependencies:
Create the file for the public endpoints
Anchor link to section titled "Create the file for the public endpoints"- In the
/web/middleware/
directory, create a new file calledqr-code-public.js
. Copy and paste the following code into the new file:
Connect the public endpoints to the server
Anchor link to section titled "Connect the public endpoints to the server"- Open the
web/index.js
file. Import the middleware public endpoints function you created in the previous step:
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:
Add the proxy rules for image and scan URLs
Anchor link to section titled "Add the proxy rules for image and scan URLs"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.
- Open the
web/frontend/vite.config.js
file. Add the
/qrcodes/
proxy rules in the server object within thedefineConfig
helper:
Step 6: Test the app
Anchor link to section titled "Step 6: Test the app"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.
- Create and save a QR code using the app.
- Test the download functionality:
- Click Download.
- Check that your browser downloaded the QR code image file.
- Test the scan functionality:
- 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.
- 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.