This is my code in which I am trying to store the merchantId in the cookie but when I print it after setting it displays undefined. What is wrong in my code? Could anyone please help me with cookies in Shopify Remix App
/* sessions.ts */
import { createCookie } from "@remix-run/node";
export const merchantData = createCookie("merchant-data", { sameSite:"none" })
/* app.tsx */
import type { HeadersFunction, LoaderFunctionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Link, Outlet, useLoaderData, useRouteError } from "@remix-run/react";
import { boundary } from "@shopify/shopify-app-remix/server";
import { AppProvider } from "@shopify/shopify-app-remix/react";
import polarisStyles from "@shopify/polaris/build/esm/styles.css?url";
import db from "../db.server"
import { authenticate } from "../shopify.server";
import { merchantData } from "~/sessions";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const { admin, session } = await authenticate.admin(request);
const shopResponse = await admin.graphql( `#graphql query {
...
}` )
const data = await shopResponse.json();
const shopData = await data.data.shop
// insert or update the store info inside the database table
const upsertResult = await db.merchant.upsert({
where: {
// id: 1,
shop: session.shop,
},
create: {
...
},
update: {
...
},
})
const merchantId = upsertResult.id
const cookieHeader = request.headers.get("Cookie")
let merchant_id
const merchantDataCookie = (await merchantData.parse(cookieHeader)) || {}
console.log(merchantDataCookie, "merchantDataCookie in app")
if (merchantDataCookie.merchantId) {
merchant_id = merchantDataCookie.merchantId
return json({ shopData: shopData, apiKey: process.env.SHOPIFY_API_KEY || "", merchant_id })
}
merchantDataCookie.merchantId = merchantId
return json({ shopData: shopData, apiKey: process.env.SHOPIFY_API_KEY || "", merchant_id }, { headers: { "Set-Cookie": await merchantData.serialize(merchantDataCookie) }
})
export default function App() {
const { apiKey, shopData, merchant_id } = useLoaderData();
console.log(merchant_id)
return (
<AppProvider isEmbeddedApp apiKey={apiKey}>
<ui-nav-menu>
<Link to="/app" rel="home">
Home
</Link>
<Link to="/app/additional">Additional {merchant_id}</Link>
</ui-nav-menu>
<Outlet />
</AppProvider>
)
}
// Shopify needs Remix to catch some thrown responses, so that their headers are included in the response.
export function ErrorBoundary() {
return boundary.error(useRouteError());
}
export const headers: HeadersFunction = (headersArgs) => {
return boundary.headers(headersArgs);
};
