App reviews, troubleshooting, and recommendations
Hello there.
I'm beginner in Shopify and I need to develop a small custom app using Shopify CLI v3.46.0 with Node js (Shopify App Template - Node). I went through all the points of the tutorial https://shopify.dev/docs/apps/getting-started/create and now I need to implement my version of the customer personal account for the store. And I have a few questions.
// @TS-check
import { join } from "path";
import { readFileSync } from "fs";
import express from "express";
import serveStatic from "serve-static";
import shopify from "./shopify.js";
import productCreator from "./product-creator.js";
import GDPRWebhookHandlers from "./gdpr.js";
import '@shopify/shopify-api/adapters/node';
import {shopifyApi, LATEST_API_VERSION} from '@shopify/shopify-api';
// Set up shopifyApi for GraphQL
const shopifyGQL = shopifyApi({
apiKey: process.env.SHOPIFY_API_KEY,
apiSecretKey: process.env.SHOPIFY_API_SECRET_KEY,
scopes: ['read_customers,write_customers'],
hostName: 'ngrok-tunnel-address', //should we use this?
});
const PORT = parseInt(
process.env.BACKEND_PORT || process.env.PORT || "3000",
10
);
const STATIC_PATH =
process.env.NODE_ENV === "production"
? `${process.cwd()}/frontend/dist`
: `${process.cwd()}/frontend/`;
const app = express();
// Set up Shopify authentication and webhook handling
app.get(shopify.config.auth.path, shopify.auth.begin());
app.get(
shopify.config.auth.callbackPath,
shopify.auth.callback(),
shopify.redirectToShopifyOrAppRoot()
);
app.post(
shopify.config.webhooks.path,
shopify.processWebhooks({ webhookHandlers: GDPRWebhookHandlers })
);
// If you are adding routes outside of the /api path, remember to
// also add a proxy rule for them in web/frontend/vite.config.js
app.use("/api/*", shopify.validateAuthenticatedSession());
app.use(express.json());
app.get("/api/products/count", async (_req, res) => {
const countData = await shopify.api.rest.Product.count({
session: res.locals.shopify.session,
});
res.status(200).send(countData);
});
app.get("/api/products/create", async (_req, res) => {
let status = 200;
let error = null;
try {
await productCreator(res.locals.shopify.session);
} catch (e) {
console.log(`Failed to process products/create: ${e.message}`);
status = 500;
error = e.message;
}
res.status(status).send({ success: status === 200, error });
});
// This is my new functionality about customer info
app.get("/api/customer", async (req, res) => {
try {
const session = res.locals.shopify.session;
const customerId = session.id; // customer id is here?
const client = new shopifyGQL.clients.Graphql({ session });
console.log('customerId: ', customerId);
const response = await client.query({
data: {
query: `
query($customerId: ID!) {
customer(id: $customerId) {
email
firstName
lastName
}
}
`,
variables: {
customerId: "gid://shopify/Customer/6912233570594",
},
},
});
const customer = response.body.data.customer;
res.json(customer);
} catch (error) {
console.error("Error retrieving customer details:", error);
res.status(500).json({ error: "Failed to retrieve customer details" });
}
});
app.use(shopify.cspHeaders());
app.use(serveStatic(STATIC_PATH, { index: false }));
app.use("/*", shopify.ensureInstalledOnShop(), async (_req, res, _next) => {
return res
.status(200)
.set("Content-Type", "text/html")
.send(readFileSync(join(STATIC_PATH, "index.html")));
});
app.listen(PORT);
And here is how it looks in the component (just small example):
import React from 'react';
import { LegacyCard, TextStyle } from '@shopify/polaris';
import {useAppQuery} from '../hooks/index.js';
export function ProfileView () {
const {
data,
isLoading,
isSuccess,
isError,
} = useAppQuery({
url: "api/customer",
});
return (
<LegacyCard
title="Profile"
sectioned
primaryFooterAction={{
loading: isLoading,
}}
>
{ isSuccess && (
<TextStyle>
<p>
Name: {data.firstName} {data.lastName}
</p>
<p>Email: {data.email}</p>
</TextStyle>
)}
{ isError && (
<p>error</p>
)}
</LegacyCard>
);
}
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023