Remix.js & GraphQL - Appending Product Descriptions

[Kit_]

Hi Developers,

I’m currently building a Shopify App with Remix.js to add descriptions to the product description field via form submissions. The current setup works, but each submission is replacing the entire product description. I’d like to update the functionality so each form submission either prepends or appends content to the existing description instead of overriding it. Below is the action function handling the form submission:

// Action function to handle form submission
export const action = async ({ request }: ActionFunctionArgs) => {
  const { admin } = await authenticate.admin(request);
  const formData = await request.formData();
  const zipcode = formData.get("zipcode");
  const price = formData.get("price");

  const id = "gid://shopify/Product/8304181903529";
  const descriptionHtml = `<p>Zipcode: ${zipcode}</p><p>Price: ${price}</p>`;

  try {
    const productUpdateResponse = await admin.graphql(
      `mutation updateProduct($productInput: ProductInput!) {
          productUpdate(input: $productInput) {
              product {
                  id
                  descriptionHtml
              }
              userErrors {
                  field
                  message
              }
          }
      }`,
      {
        variables: {
          productInput: {
            id,
            descriptionHtml,
          },
        },
      }
    );

    return json({ success: "Product description updated successfully!" });

  } catch (error) {
    console.error("Unexpected error:", error);
    return json({ errors: ["Unexpected error occurred"], message: error.message }, { status: 500 });
  }
};

Can you please help me adjust the GraphQL mutation to ensure each form submission appends content to the current description rather than replacing it?

I would really appreciate your help and information.

Many thanks

[Kyle_liu · Accepted solution]

Hi @Kit_ 

Can you consider obtaining the product description and then calling updateProduct to update the content you want to add to the product data.

const productResponse = await admin.graphql(
  `query getProduct ($id: ID!){
  product(id: $id) {
    descriptionHtml
  }
}`);

const descriptionHtml = `${productResponse.descriptionHtml}<p>Zipcode: ${zipcode}</p><p>Price: ${price}</p>`;

const productUpdateResponse = await admin.graphql(
      `mutation updateProduct($productInput: ProductInput!) {
          productUpdate(input: $productInput) {
              product {
                  id
                  descriptionHtml
              }
              userErrors {
                  field
                  message
              }
          }
      }`,
      {
        variables: {
          productInput: {
            id,
            descriptionHtml,
          },
        },
      }
    );

[Kit_]

Hi @Kyle_liu,

Thank you so much for your help. I really appreciate it. It is working now, as for every form submission it is first pulling the data from product description and adding the submitted for data and again inserting back into the product description.

Since this is my first journey building Shopify app, hence i am keeping it very simple but effective.

If you don't mind me asking, what would be the best possible ways to put the zipcode and associated price? As per now i am putting it in the product description, i do not want to put the submitted data in the different servers and pulling it from there.

What would be the best possible route here for me? Should i store the data in the Shopify product description? but only down issue would be it would be hard to edit, update and delete if we put too many zipcode and associated price?

Many thanks