Changing Metafield from Frontend

Extensions
1

Hello Community Experts ,
I am in the process of developing an app in Shopify .
What I want to do is to store the wishlist data of customer logged-in in the metafield of customer by a name cust_wish ,

I have an api.wishlist.jsx in my routes of my app with data

import { json } from "@remix-run/node";
import db from "../db.server";
import { cors } from "remix-utils/cors";
import { authenticate } from "../shopify.server";

export async function loader({ request }) {
  try {
    const { admin } = await authenticate.admin(request);
    if (admin) {
      const wishlistMetafieldData = await admin.graphql(`
        query {
          metafieldDefinitions(first: 250, ownerType: CUSTOMER) {
            edges {
              node {
                name
                id
                key
                namespace
              }
            }
          }
        }
      `);

      return json({ ok: true, data: wishlistMetafieldData });
    } else {
      return json(
        { ok: false, message: "Admin access not authorized." },
        { status: 401 },
      );
    }
  } catch (error) {
    console.error("Error accessing Shopify Admin API:", error);
    return json(
      { ok: false, message: "Error accessing Admin API" },
      { status: 500 },
    );
  }
}

I am trying to fetch this from my frontend with js

  try {
        const response = await fetch(
          `${this.appUrl}api/wishlist?customerId=${this.customerId}&productId=${this.productId}&shop=${this.shopDomain}`,
        );
        console.log(response);
        // Check if response is okay before parsing JSON
        if (!response.ok) {
          const errorText = await response.text();
          console.error("Error response from server:", errorText);
          return;
        }

        const result = await response.json();

        // Check if productId exists in the wishlist items returned by the server
        this.wishlisted = result.data.includes(this.productId);
        this.updateIcon();
      } catch (error) {
        console.error("Error fetching wishlist status:", error);
      }

but its unable to authenticate for some reason . Any help would be really appreciated .

2

Hi @rahuldhiman - I’m discussing this with internal teams, will update this forum post when I learn more.

3

Hi again @rahuldhiman - have connected with the Remix product team and they don’t think you should be wrapping authenticate.admin(request) with try/catch . authenticate.admin() may throw a redirect response. Because you catch that response, you could break critical auth flows.

Also for a logged in buyer in a storefront context it’s not expected that you would use authenticate.admin(). Instead, you should use an App proxy .

Hope this helps!