Create Shop App - Next.js Boilerplate Snippets

The essential collection of Snippets for creating Shopify applications when using @kinngh/shopify-nextjs-prisma-app

Features

Snippets to quickly create endpoints and functions in React, Next.js and relevant Shopify app code.

I selected these snippets from my regular use and code that I was writing over and over again. Instead of again including a __templates/ directory that was causing a lot of confusion, it made more sense to create an extension for snippets instead.

Snippets

Expansions

React

imr - Import React

import * as React from "react";

imrs - Import React and useState

import React, { useState } from "react";

imre - Import React and useEffect

import React, { useEffect } from "react";

imrse - Import React, useState and useEffect

import React, { useState, useEffect } from "react";

afc - Create an arrow function component

const | = (|) => {
    return ( | );
}

export default |;

useEffect - Create useEffect hook

useEffect(() => {
    |
}, []);

useState - Create useState hook

const [|, set|] = useState();

Boilerplate Code

newPage - Create a new Polaris page with a LegacyCard

import { Page, Layout, LegacyCard } from "@shopify/polaris";

const | = (|) => {
    return (
        <>
            <Page>
                <Layout>
                    <Layout.Section>
                        <LegacyCard sectioned title="|">
                            <p>|</p>
                        </LegacyCard>
                    </Layout.Section>
                </Layout>
            </Page>
        </>
    );
};

export default |;

newPageEmpty - Create a new Polaris page with a LegacyCard and Empty State

import { Page, Layout, LegacyCard, EmptyState } from "@shopify/polaris";

const | = (|) => {
    return (
        <>
            <Page>
                <Layout>
                    <Layout.Section>
                        <LegacyCard sectioned>
                            {/* Taken from Shopify Polaris */}
                            <EmptyState
                                heading="Manage your inventory transfers"
                                action={{ content: "Add transfer" }}
                                secondaryAction={{
                                    content: "Learn more",
                                    url: "https://help.shopify.com",
                                }}
                                image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
                            >
                                <p>Track and receive your incoming inventory from suppliers.</p>
                            </EmptyState>
                        </LegacyCard>
                    </Layout.Section>
                </Layout>
            </Page>
        </>
    );
};

export default |;

createapi - Create a new endpoint for /api

import withMiddleware from "@/utils/middleware/withMiddleware.js";

const | = async (req, res) => {
    if (req.method === "GET") {
        //GET, POST, PUT, DELETE
        console.log("Serve this only if the request method is GET");
    }

    try {
        |
        return res.status(200).send({ text: "Success!" });
    } catch (e) {
        console.error(e);
        return res.status(400).send({ text: "Bad request" });
    }
};

export default withMiddleware("verifyRequest")(|);

createproxy - Create a new endpoint for /api/proxy_route

import withMiddleware from "@/utils/middleware/withMiddleware.js";

const | = async (req, res) => {
    if (req.method === "GET") {
        //GET, POST, PUT, DELETE
        console.log("Serve this request only if method type is GET");
    }
    try {
        |
        res.status(200).send({ content: "Proxy Be Working" });
    } catch (e) {
        console.error(e);
        res.status(400).send({ content: "An error occured" });
    }
};

export default withMiddleware("verifyProxy")(|);

createwebhook - Create a new webhook function

const | = async (topic, shop, webhookRequestBody, webhookId, apiVersion) => {
    try {
        const webhookBody = JSON.parse(webhookRequestBody);
        |
    } catch (e) {
        console.error(e);
    }
};

export default |;

createClientGql - Create a new GraphQL Client

import clientProvider from "@/utils/clientProvider";
import withMiddleware from "@/utils/middleware/withMiddleware";

const | = async (req, res) => {
    try {
        const { client } = await clientProvider.graphqlClient({
            req,
            res,
            isOnline: |, //false for offline session, true for online session
        });

        const response = await client.query({
            data: `{}`, //Paste your GraphQL query/mutation here
        });

        res.status(200).send(response);
    } catch (e) {
        console.error(e);
        res.status(400).send({ error: "An error occured" });
    }
};

export default withMiddleware("verifyRequest")(|);