refactor: Use withResponse (#1602)

Author: Jiralite

code-samples/popular-topics/reactions/14/awaiting-reactions.js

@@ -12,7 +12,8 @@ client.on(Events.InteractionCreate, async interaction => {
 	if (!interaction.isChatInputCommand()) return;
 
 	if (interaction.commandName === 'react-await') {
-		const message = await interaction.reply({ content: 'Awaiting emojis...', fetchReply: true });
+		const response = await interaction.reply({ content: 'Awaiting emojis...', withResponse: true });
+		const { message } = response.resource;
 		message.react('👍').then(() => message.react('👎'));
 
 		const collectorFilter = (reaction, user) => {

code-samples/popular-topics/reactions/14/basic-reacting.js

@@ -14,13 +14,17 @@ client.on(Events.InteractionCreate, async interaction => {
 	const { commandName } = interaction;
 
 	if (commandName === 'react') {
-		const message = await interaction.reply({ content: 'You can react with Unicode emojis!', fetchReply: true });
+		const response = await interaction.reply({ content: 'You can react with Unicode emojis!', withResponse: true });
+		const { message } = response.resource;
 		message.react('😄');
 	} else if (commandName === 'react-custom') {
-		const message = await interaction.reply({ content: 'You can react with custom emojis!', fetchReply: true });
+		const response = await interaction.reply({ content: 'You can react with custom emojis!', withResponse: true });
+		const { message } = response.resource;
 		message.react('123456789012345678');
 	} else if (commandName === 'fruits') {
-		const message = await interaction.reply({ content: 'Reacting with fruits!', fetchReply: true });
+		const response = await interaction.reply({ content: 'Reacting with fruits!', withResponse: true });
+		const { message } = response.resource;
+
 		message.react('🍎')
 			.then(() => message.react('🍊'))
 			.then(() => message.react('🍇'))

guide/additional-info/async-await.md

@@ -101,7 +101,8 @@ If you don't know how Node.js asynchronous execution works, you would probably t
 client.on(Events.InteractionCreate, interaction => {
 	// ...
 	if (commandName === 'react') {
-		const message = interaction.reply({ content: 'Reacting!', fetchReply: true });
+		const response = interaction.reply({ content: 'Reacting!', withResponse: true });
+		const { message } = response.resource;
 		message.react('🇦');
 		message.react('🇧');
 		message.react('🇨');
@@ -115,8 +116,10 @@ But since all of these methods are started at the same time, it would just be a
 client.on(Events.InteractionCreate, interaction => {
 	// ...
 	if (commandName === 'react') {
-		interaction.reply({ content: 'Reacting!', fetchReply: true })
-			.then(message => {
+		interaction.reply({ content: 'Reacting!', withResponse: true })
+			.then(response => {
+				const { message } = response.resource;
+
 				message.react('🇦')
 					.then(() => message.react('🇧'))
 					.then(() => message.react('🇨'))
@@ -134,7 +137,8 @@ In this piece of code, the Promises are [chain resolved](https://developer.mozil
 client.on(Events.InteractionCreate, async interaction => {
 	// ...
 	if (commandName === 'react') {
-		const message = await interaction.reply({ content: 'Reacting!', fetchReply: true });
+		const response = await interaction.reply({ content: 'Reacting!', withResponse: true });
+		const { message } = response.resource;
 		await message.react('🇦');
 		await message.react('🇧');
 		await message.react('🇨');
@@ -148,7 +152,8 @@ It's mostly the same code, but how would you catch Promise rejections now since
 client.on(Events.InteractionCreate, async interaction => {
 	if (commandName === 'react') {
 		try {
-			const message = await interaction.reply({ content: 'Reacting!', fetchReply: true });
+			const response = await interaction.reply({ content: 'Reacting!', withResponse: true });
+			const { message } = response.resource;
 			await message.react('🇦');
 			await message.react('🇧');
 			await message.react('🇨');
@@ -169,23 +174,23 @@ Let's look at an example where you want to delete a sent reply.
 client.on(Events.InteractionCreate, interaction => {
 	// ...
 	if (commandName === 'delete') {
-		interaction.reply({ content: 'This message will be deleted.', fetchReply: true })
-			.then(replyMessage => setTimeout(() => replyMessage.delete(), 10_000))
+		interaction.reply({ content: 'This message will be deleted.', withResponse: true })
+			.then(response => setTimeout(() => response.resource.message.delete(), 10_000))
 			.catch(error => {
 				// handle error
 			});
 	}
 });
 ```
 
-The return value of a `.reply()` with the `fetchReply` option set to `true` is a Promise which resolves with the reply when it has been sent, but how would the same code with async/await look?
+The return value of a `.reply()` with the `withResponse` option set to `true` is a promise which resolves with <DocsLink path="InteractionCallbackResponse:Class" />, but how would the same code with async/await look?
 
 ```js {1,4-10}
 client.on(Events.InteractionCreate, async interaction => {
 	if (commandName === 'delete') {
 		try {
-			const replyMessage = await interaction.reply({ content: 'This message will be deleted.', fetchReply: true });
-			setTimeout(() => replyMessage.delete(), 10_000);
+			const response = await interaction.reply({ content: 'This message will be deleted.', withResponse: true });
+			setTimeout(() => response.resource.message.delete(), 10_000);
 		} catch (error) {
 			// handle error
 		}

guide/popular-topics/collectors.md

@@ -66,9 +66,9 @@ const collectorFilter = response => {
 	return item.answers.some(answer => answer.toLowerCase() === response.content.toLowerCase());
 };
 
-interaction.reply({ content: item.question, fetchReply: true })
-	.then(() => {
-		interaction.channel.awaitMessages({ filter: collectorFilter, max: 1, time: 30_000, errors: ['time'] })
+interaction.reply({ content: item.question, withResponse: true })
+	.then(response => {
+		response.resource.message.channel.awaitMessages({ filter: collectorFilter, max: 1, time: 30_000, errors: ['time'] })
 			.then(collected => {
 				interaction.followUp(`${collected.first().author} got the correct answer!`);
 			})

guide/popular-topics/faq.md

@@ -319,7 +319,7 @@ If you're using [sharding](/sharding/), a specific shard's heartbeat can be foun
 The second, **Roundtrip Latency**, describes the amount of time a full API roundtrip (from the creation of the command message to the creation of the response message) takes. You then edit the response to the respective value to avoid needing to send yet another message:
 
 ```js
-const sent = await interaction.reply({ content: 'Pinging...', fetchReply: true });
+const sent = await interaction.reply({ content: 'Pinging...' });
 interaction.editReply(`Roundtrip latency: ${sent.createdTimestamp - interaction.createdTimestamp}ms`);
 ```
 

guide/popular-topics/reactions.md

@@ -60,8 +60,8 @@ client.on(Events.InteractionCreate, async interaction => {
 	const { commandName } = interaction;
 
 	if (commandName === 'react') {
-		const message = await interaction.reply({ content: 'You can react with Unicode emojis!', fetchReply: true });
-		message.react('😄');
+		const response = await interaction.reply({ content: 'You can react with Unicode emojis!', withResponse: true });
+		response.resource.message.react('😄');
 	}
 });
 ```
@@ -107,8 +107,8 @@ client.on(Events.InteractionCreate, async interaction => {
 	const { commandName } = interaction;
 
 	if (commandName === 'react-custom') {
-		const message = await interaction.reply({ content: 'You can react with custom emojis!', fetchReply: true });
-		message.react('123456789012345678');
+		const response = await interaction.reply({ content: 'You can react with custom emojis!', withResponse: true });
+		response.resource.message.react('123456789012345678');
 	}
 });
 ```
@@ -158,7 +158,8 @@ Using `.find()`, your code would look something like this:
 
 ```js {3-4}
 if (commandName === 'react-custom') {
-	const message = await interaction.reply({ content: 'You can react with custom emojis!', fetchReply: true });
+	const response = await interaction.reply({ content: 'You can react with custom emojis!', withResponse: true });
+	const message = response.resource.message;
 	const reactionEmoji = message.guild.emojis.cache.find(emoji => emoji.name === 'blobreach');
 	message.react(reactionEmoji);
 }
@@ -170,9 +171,9 @@ Using `.get()`, your code would look something like this:
 
 ```js {3-4}
 if (commandName === 'react-custom') {
-	const message = await interaction.reply({ content: 'You can react with custom emojis!', fetchReply: true });
+	const response = await interaction.reply({ content: 'You can react with custom emojis!', withResponse: true });
 	const reactionEmoji = client.emojis.cache.get('123456789012345678');
-	message.react(reactionEmoji);
+	response.resource.message.react(reactionEmoji);
 }
 ```
 
@@ -189,8 +190,8 @@ client.on(Events.InteractionCreate, async interaction => {
 	const { commandName } = interaction;
 
 	if (commandName === 'fruits') {
-		interaction.reply('Reacting with fruits!');
-		const message = await interaction.fetchReply();
+		const response = await interaction.reply({ content: 'Reacting with fruits!', withResponse: true });
+		const { message } = response.resource;
 		message.react('🍎');
 		message.react('🍊');
 		message.react('🍇');
@@ -260,8 +261,9 @@ client.on(Events.InteractionCreate, async interaction => {
 	const { commandName } = interaction;
 
 	if (commandName === 'fruits') {
-		const message = await interaction.reply({ content: 'Reacting with fruits!', fetchReply: true });
-		message.react('🍎')
+		const response = await interaction.reply({ content: 'Reacting with fruits!', withResponse: true });
+
+		response.resource.message.react('🍎')
 			.then(() => message.react('🍊'))
 			.then(() => message.react('🍇'))
 			.catch(error => console.error('One of the emojis failed to react:', error));
@@ -278,7 +280,8 @@ client.on(Events.InteractionCreate, async interaction => {
 	const { commandName } = interaction;
 
 	if (commandName === 'fruits') {
-		const message = await interaction.reply({ content: 'Reacting with fruits!', fetchReply: true });
+		const response = await interaction.reply({ content: 'Reacting with fruits!', withResponse: true });
+		const { message } = response.resource;
 
 		try {
 			await message.react('🍎');
@@ -356,7 +359,7 @@ However, if you don't mind the order the emojis react in, you can take advantage
 
 ```js {3-8}
 if (commandName === 'fruits') {
-	const message = await interaction.reply({ content: 'Reacting with fruits!', fetchReply: true });
+	const message = await interaction.reply({ content: 'Reacting with fruits!' });
 	Promise.all([
 		message.react('🍎'),
 		message.react('🍊'),

guide/slash-commands/response-methods.md

@@ -200,9 +200,14 @@ await interaction.reply('Pong!');
 await interaction.deleteReply();
 ```
 
-Lastly, you may require the `Message` object of a reply for various reasons, such as adding reactions. You can use the `ChatInputCommandInteraction#fetchReply()` method to fetch the `Message` instance of an initial response:
+Lastly, you may require the `Message` object of a reply for various reasons, such as adding reactions. Pass `withResponse: true` to obtain the <DocsLink path="InteractionCallbackResponse:Class" />. You can then access the `Message` object like so:
 
-<!-- eslint-skip -->
+```js
+const response = await interaction.reply({ content: 'Pong!', withResponse: true });
+console.log(response.resource.message);
+```
+
+You can also use the `ChatInputCommandInteraction#fetchReply()` method to fetch the `Message` instance. Do note that this incurs an extra API call in comparison to `withResponse: true`:
 
 ```js
 await interaction.reply('Pong!');