How to Get Shopify Orders with Remix and GraphQL?

Shopify provides powerful APIs to interact with store data, and GraphQL is the preferred way to fetch data efficiently. When building a Shopify app with Remix, using GraphQL queries to fetch orders is an optimal approach for performance and flexibility.

Learn – How to Check Orders in Shopify?

In this blog post, we’ll show you how to get Shopify order details with Remix and GraphQL.

Steps to Get Shopify Orders with Remix and GraphQL:

Step 1: Firstly, you need to have read_orders and write_orders access scopes.

To get Shopify orders with Remix and GraphQL, you need to add read_orders and wrire_orders access scopes to your app.toml file.

Make sure to add other required access scopes if you are getting additional details with orders. For example, if you are getting customer details, then you need to add the read_customer and write_customers access scopes.

Step 2: Create a code file for it.

After checking the access scopes, you need to generate a code file that will be executed in the app.

Here is a code example : 

import { json } from "@remix-run/node";
import { authenticate } from "../shopify.server";
import { useLoaderData } from "@remix-run/react";
import { Page, Card, Box } from "@shopify/polaris";

export async function loader({ request }) {
    const { admin } = await authenticate.admin(request);
    const orderData = await admin.graphql(`
        {
            orders(first: 10) {
                edges {
                    node {
                        id
                        confirmed
                        createdAt
                        fullyPaid
                    }
                }
            }
        }
    `);
    const data = await orderData.json();
    console.log("data:", data);

    return json({ orders: data.data.orders.edges });
}

export default function Index() {
    const loaderData = useLoaderData();
    const orders = loaderData.orders || [];

    console.log("Orders:", orders);

    return (
        <Page title="Orders">
            {orders.length === 0 ? (
                <p>No orders found.</p>
            ) : (
                orders.map((item) => {
                    const { id, confirmed, createdAt, fullyPaid } = item.node;
                    return (
                        <Box paddingBlockStart={100}>
                            <Card key={id} title={`Order ID: ${id}`} sectioned>
                                <p><strong>Order ID: </strong> {id}</p>
                                <p><strong>Confirmed:</strong> {confirmed ? "Yes" : "No"}</p>
                                <p><strong>Created At:</strong> {new Date(createdAt).toLocaleString()}</p>
                                <p><strong>Fully Paid:</strong> {fullyPaid ? "Yes" : "No"}</p>
                            </Card>
                        </Box>
                    );
                })
            )}
        </Page>
    );
}

Output:

You will get details of the first 10 orders, which include the order ID, order is confirmed or not, the order creation date, and order is fully paid or not.

Here is the screenshot of the output:

Conclusion:

In this blog, we learnt how to get Shopify order data in your Shopify Remix app. Using this, you can manage orders from your Shopify app, and you can also make it dynamic code from this code example provided in the blog.