I have created an app, and with the admin’s panel, we can add any section to the theme. However, I want to ensure that when the app is uninstalled, any section and template files that were added also get deleted at the time of uninstallation.
My app is built using a Node.js template, and it fetches data from a GraphQL API.
Here is my code for deleting the theme file:
app.post('/api/theme/fileDelete', async (req, res) => {
try {
// Initialize Shopify client
const client = new shopify.api.clients.Graphql({
session: res.locals.shopify.session,
});
const themeId = "gid://shopify/OnlineStoreTheme/146551537909"; // specify your theme ID
const filesToDelete = ["templates/index3.liquid"]; // specify the files to delete
// Set up GraphQL mutation to delete theme files
let mutation = `mutation($themeId: ID!, $files: [String!]!) {
themeFilesDelete(themeId: $themeId, files: $files) {
deletedThemeFiles {
filename
}
userErrors {
field
message
}
}
}`;
// Send the request
const response = await client.request(mutation, { variables: { themeId, files: filesToDelete } });
// Log the result and send a response
console.log("Files deleted:", response.data);
res.status(200).send({message: "Theme files deleted"});
} catch (error) {
console.error("Error deleting theme files on uninstall:", error);
res.status(500).send({message: error});
}
});
//or
const themeFileDelete = async (req,res) => {
try {
// Initialize Shopify client
const client = new shopify.api.clients.Graphql({
session: res.locals.shopify.session,
});
const themeId = "gid://shopify/OnlineStoreTheme/146551537909"; // specify your theme ID
const filesToDelete = ["templates/index3.liquid"]; // specify the files to delete
// Set up GraphQL mutation to delete theme files
let mutation = `mutation($themeId: ID!, $files: [String!]!) {
themeFilesDelete(themeId: $themeId, files: $files) {
deletedThemeFiles {
filename
}
userErrors {
field
message
}
}
}`;
// Send the request
const response = await client.request(mutation, { variables: { themeId, files: filesToDelete } });
// Log the result and send a response
console.log("Files deleted:", response.data);
res.status(200).send({message:"delete theme file"})
// Optionally, you can also send a confirmation response back to the shop (if needed)
} catch (error) {
console.error("Error deleting theme files on uninstall:", error);
res.status(500).send({message:error})
}
};
export default themeFileDelete;
I have also set up a webhook for when the app is uninstalled, and it is working fine. However, I want the theme file deletion API to run only when the uninstall webhook is triggered.
Note: I have created the uninstall webhook in the privacy.js file, and I need to figure out how to run the theme deletion function from index.js when the uninstall webhook is triggered.
Here’s how my webhook setup looks:
import { DeliveryMethod } from "@shopify/shopify-api";
import themeFileDelete from './index.js'
/**
* @type {{[key: string]: import("@shopify/shopify-api").WebhookHandler}}
*/
export default {
/**
* Customers can request their data from a store owner. When this happens,
* Shopify invokes this privacy webhook.
*
* https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks#customers-data_request
*/
CUSTOMERS_DATA_REQUEST: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: "/api/webhooks",
callback: async (topic, shop, body, webhookId) => {
const payload = JSON.parse(body);
// console.log(payload,"payloadpayload")
// Payload has the following shape:
// {
// "shop_id": 954889,
// "shop_domain": "{shop}.myshopify.com",
// "orders_requested": [
// 299938,
// 280263,
// 220458
// ],
// "customer": {
// "id": 191167,
// "email": "john@example.com",
// "phone": "555-625-1199"
// },
// "data_request": {
// "id": 9999
// }
// }
},
},
/**
* Store owners can request that data is deleted on behalf of a customer. When
* this happens, Shopify invokes this privacy webhook.
*
* https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks#customers-redact
*/
CUSTOMERS_REDACT: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: "/api/webhooks",
callback: async (topic, shop, body, webhookId) => {
const payload = JSON.parse(body);
// console.log(payload,"payload2")
// Payload has the following shape:
// {
// "shop_id": 954889,
// "shop_domain": "{shop}.myshopify.com",
// "customer": {
// "id": 191167,
// "email": "john@example.com",
// "phone": "555-625-1199"
// },
// "orders_to_redact": [
// 299938,
// 280263,
// 220458
// ]
// }
},
},
/**
* 48 hours after a store owner uninstalls your app, Shopify invokes this
* privacy webhook.
*
* https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks#shop-redact
*/
SHOP_REDACT: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: "/api/webhooks",
callback: async (topic, shop, body, webhookId) => {
const payload = JSON.parse(body);
// console.log(payload,"payload3")
// console.log(payload,"appuninstall detata")
// Payload has the following shape:
// {
// "shop_id": 954889,
// "shop_domain": "{shop}.myshopify.com"
// }
},
},
/**
* Webhook for when the app is uninstalled
*/
APP_UNINSTALLED: {
deliveryMethod: DeliveryMethod.Http,
callbackUrl: "/api/webhooks",
callback: async (topic, shop, body, webhookId) => {
const payload = JSON.parse(body);
console.log(payload,"--------------Payload")
console.log(topic,"--------------topic")
console.log(shop,"--------------shop")
console.log(webhookId,"--------------webhookId")
await themeFileDelete()
}
}
};