How to use graphql on the front end

I have currently set up a route as follows:

import { RouteHandler } from "gadget-server";

const route: RouteHandler = async ({ request, reply, connections, logger }) => {
  const shopify = connections.shopify.current;

  if (!shopify) {
    logger.error("No Shopify connection found.");
    return reply.status(400).send({ error: "No shop found" });
  }

  try {
    //logic where I use the connection to make a graphQL call to save settings in a metafield.
  } catch (error) {
    logger.error('Error saving settings:', error);
    return reply.status(500).send({ error: 'Failed to save settings' });
  }
};

export default route;

import { RouteHandler } from "gadget-server";

const route: RouteHandler = async ({ request, reply, connections, logger }) => {
  const shopify = connections.shopify.current;

  if (!shopify) {
    logger.error("No Shopify connection found.");
    return reply.status(400).send({ error: "No shop found" });
  }

  try {
    //logic where I use the connection to make a graphQL call to save settings in a metafield.
  } catch (error) {
    logger.error('Error saving settings:', error);
    return reply.status(500).send({ error: 'Failed to save settings' });
  }
};

export default route;

And this is how I call it on my frontend react file:

      const response = await fetch('/payment-customization-settings', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(settings),
      });

      const response = await fetch('/payment-customization-settings', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(settings),
      });

However I keep getting this error:

app-bridge.js:1 
 POST https://hidesort--development.gadget.app/payment-customization-settings 500 (Internal Server Error)
(anonymous)    @    app-bridge.js:1
await in (anonymous)        
(anonymous)    @    requests.js:1
(anonymous)    @    PaymentCustomizationForm.tsx:155
onAction    @    app-bridge.js:1
call    @    app-bridge.js:1
f    @    app-bridge.js:1

PaymentCustomizationForm.tsx:171 
Error saving settings: Error: Failed to save settings
    at PaymentCustomizationForm.tsx:164:15

app-bridge.js:1 
 POST https://hidesort--development.gadget.app/payment-customization-settings 500 (Internal Server Error)
(anonymous)    @    app-bridge.js:1
await in (anonymous)        
(anonymous)    @    requests.js:1
(anonymous)    @    PaymentCustomizationForm.tsx:155
onAction    @    app-bridge.js:1
call    @    app-bridge.js:1
f    @    app-bridge.js:1

PaymentCustomizationForm.tsx:171 
Error saving settings: Error: Failed to save settings
    at PaymentCustomizationForm.tsx:164:15

Is there a better way to use the shopify client on the frontend in an embedded app instance

56 Replies

safwanOP•8mo ago

OKay I tried using a global action and it is still giving me problems, I think this is happening mostly because of some authentication issues since the shopify client object is appearing as blank, how to fix this?

ljspoor94•8mo ago

Please check one of the recent help posts https://discord.com/channels/836317518595096598/1327342551228874894/1327388160421924924

safwanOP•8mo ago

okay but I'm not calling it from an extension, this is an embedded app, it is an authenticated instance, idk why its not working

ljspoor94•8mo ago

Have a look at these docs https://docs.gadget.dev/guides/plugins/shopify/frontends

Shopify App Frontends - Developer Docs - Gadget

Gadget Docs

safwanOP•8mo ago

Yeah I did exactly whats in this guide to be precise, the section Calling Shopify within actions guide And im calling the global action like this in my code:

const [{ fetching: isSaving }, saveSettings] = useGlobalAction(api.savePaymentCustomization);
const handleSave = useCallback(async () => {
    try {
      await saveSettings({
        payload: {
          status: settings.status,
          name: settings.name,
          timing: settings.timing,
          actions: settings.actions,
          conditions: settings.conditions
        }
      });
      app.saveBar.hide('payment-customization-form');
      setIsDirty(false);
      onBack();
    } catch (error) {
      console.error('Error saving settings:', error);
    }
  }, [settings, onBack, app.saveBar, saveSettings]);

const [{ fetching: isSaving }, saveSettings] = useGlobalAction(api.savePaymentCustomization);
const handleSave = useCallback(async () => {
    try {
      await saveSettings({
        payload: {
          status: settings.status,
          name: settings.name,
          timing: settings.timing,
          actions: settings.actions,
          conditions: settings.conditions
        }
      });
      app.saveBar.hide('payment-customization-form');
      setIsDirty(false);
      onBack();
    } catch (error) {
      console.error('Error saving settings:', error);
    }
  }, [settings, onBack, app.saveBar, saveSettings]);

Someone please help me with this

Gaming

Programming

How to use graphql on the front end

Did you find this page helpful?