[Docs Site] Add query prop to APIRequest and CURL

Author: KianNH

src/components/APIRequest.astro

@@ -17,10 +17,11 @@ const props = z
 		parameters: z.record(z.string(), z.any()).optional(),
 		json: z.union([Record, z.array(Record)]).optional(),
 		form: Record.optional(),
+		query: z.record(z.string(), z.string()).optional(),
 	})
 	.strict();
 
-let { path, method, parameters, json, form } = props.parse(Astro.props);
+let { path, method, parameters, json, form, query } = props.parse(Astro.props);
 
 if (json && form) {
 	throw new Error(`[APIRequest] Cannot use both "json" and "form" properties.`);
@@ -67,12 +68,11 @@ if (extraneousParameters.length > 0) {
 }
 
 for (const parameter of endpointParameters) {
-	if (parameter.in === "path") {
+	if (parameter.in === "path" && parameters?.[parameter.name]) {
 		const encoded = encodeURIComponent(`{${parameter.name}}`);
-
-		if (parameters?.[parameter.name]) {
-			url.pathname = url.pathname.replace(encoded, parameters[parameter.name]);
-		}
+		url.pathname = url.pathname.replace(encoded, parameters[parameter.name]);
+	} else if (parameter.in === "query" && parameters?.[parameter.name]) {
+		url.searchParams.set(parameter.name, parameters[parameter.name]);
 	}
 }
 
@@ -163,6 +163,7 @@ const tokenGroups = operation["x-api-token-group"];
 	headers={headers}
 	json={json}
 	form={form}
+	query={query}
 	code={{
 		title: operation.summary,
 	}}

src/components/CURL.astro

@@ -15,18 +15,34 @@ const props = z.object({
 	headers: z.record(z.string(), z.string()).default({}),
 	json: z.union([Record, z.array(Record)]).optional(),
 	form: Record.optional(),
+	query: z.record(z.string(), z.string()).optional(),
 	code: z
 		.custom<Omit<ComponentProps<typeof Code>, "code" | "lang">>()
 		.optional(),
 });
 
-const { method, url, headers, json, form, code } = props.parse(Astro.props);
+const {
+	method,
+	url: baseUrl,
+	headers,
+	json,
+	form,
+	query,
+	code,
+} = props.parse(Astro.props);
 
 if (json && form) {
 	throw new Error("[CURL] Cannot use both 'json' and 'form' properties.");
 }
 
-const lines = [`curl ${url}`, `\t--request ${method}`];
+const url = new URL(baseUrl);
+if (query) {
+	for (const [key, value] of Object.entries(query)) {
+		url.searchParams.set(key, value);
+	}
+}
+
+const lines = [`curl "${url.toString()}"`, `\t--request ${method}`];
 
 if (headers) {
 	for (const [key, value] of Object.entries(headers)) {

src/content/docs/style-guide/components/api-request.mdx

@@ -98,4 +98,10 @@ If required properties are missing, the component will throw an error.
 
 The FormData payload to send.
 
-This field is not currently validated against the schema.
+This field is not currently validated against the schema.
+
+### `query`
+
+**type:** `Record<string, string>`
+
+URL query parameters to append to the request URL.

src/content/docs/style-guide/components/curl.mdx

@@ -23,6 +23,10 @@ import { CURL } from "~/components";
 	json={{
 		key: "va'l'ue",
 	}}
+	query={{
+		foo: "bar",
+		bar: "baz",
+	}}
 	code={{
 		mark: "value"
 	}}
@@ -76,6 +80,12 @@ JSON data to include in the request.
 
 The FormData payload to send.
 
+### `query`
+
+**type:** `Record<string, string>`
+
+URL query parameters to append to the request URL.
+
 ### `code`
 
 **type:** `object`