How to use graphql on the front end

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; 

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

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