How to Display MySQL Database Data into your Shopify Remix App?

Shopify Remix, Shopify’s platform for building custom storefront experiences, is a powerful tool for developers to create unique shopping experiences tailored to their needs. One common requirement in many Shopify apps is the ability to display data from an external MySQL database.

In this tutorial, we’ll guide you through the process of seamlessly integrating data from a MySQL database into your Shopify Remix app. Leveraging GraphQL, Shopify’s powerful API, we’ll focus on retrieving and displaying specific data efficiently. The example model used in this tutorial is a ‘User’ table, but these concepts can be applied to various data structures.

Steps to Display MySQL Database Data into your Shopify Remix App:

Step 1: Setting up your Data Model

The first step is to define your data model. For our example, we’ll use a ‘User’ table with columns ‘id’ and ‘name’. Ensure your MySQL database is set up and contains the necessary data. Here’s an example model definition:

For example you have User table :

model User {
  id Int @id @default(autoincrement())
  name String
}

This model defines a ‘User’ table with columns for ‘id’ and ‘name’. The @id and @default(autoincrement()) annotations signify that ‘id’ is the primary key and automatically increments with each new entry.

Step 2: Fetching Data From Database

To fetch data from our MySQL database, we’ll use the loader function in our route file. This function queries the database using a library like Prisma and returns the user data. This data is then made available in the component through UseLoaderData. Here’s an example of the loader function:

// Example loader function in route file

import { useLoaderData } from "@remix-run/react";
import { json } from "@remix-run/node";
import db from "../db.server";

export async function loader() {
    const users = await db.user.findMany();
    return json({ users });
}

Step 3: Displaying Data in your Remix App

Now that you have the data, it’s time to display it in your Shopify Remix app. The index component showcases how to use the fetched user data within a Polaris Card and List.

// Example index component in route file

import { useLoaderData } from "@remix-run/react";
import { Card, Page, List } from "@shopify/polaris";

export default function index() {
    const { users } = useLoaderData();
    return (
        <Page>
            <Card>
                {users.map((user) => (
                    <List type="bullet" key={user.id}>
                        <List.Item>{user.name}</List.Item>
                    </List>
                ))}
            </Card>
        </Page>
    );
}

Conclusion:

By following this tutorial, you’ve successfully integrated MySQL database data into your Shopify Remix app using GraphQL. This process can be adapted for various data structures, providing you with a solid foundation for creating dynamic and data-driven web applications. Explore further possibilities and enhance your app by extending this knowledge to other aspects of Shopify development.

Also learn, How to Integrate MySQL Database to a Shopify Remix App.

Happy Coding!