[Docs Site] Add query prop to APIRequest and CURL

[KianNH]

Summary

Add query prop to APIRequest and CURL

Screenshots (optional)

[hyperlint-ai]

Howdy and thanks for contributing to our repo. The Cloudflare team reviews new, external PRs within two (2) weeks. If it's been two weeks or longer without any movement, please tag the PR Assignees in a comment.

We review internal PRs within 1 week. If it's something urgent or has been sitting without a comment, start a thread in the Developer Docs space internally.

---

PR Change Summary

Added a query property to the APIRequest and CURL components to allow for URL query parameters.

• Introduced a query prop in the APIRequest component for URL query parameters.
• Updated CURL documentation to include examples of using the query prop.
• Specified the type of the query prop as Record<string, string> in both components.

Modified Files

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

---

How can I customize these reviews?

Check out the Hyperlint AI Reviewer docs for more information on how to customize the review.

If you just want to ignore it on this PR, you can add the hyperlint-ignore label to the PR. Future changes won't trigger a Hyperlint review.

Note specifically for link checks, we only check the first 30 links in a file and we cache the results for several hours (for instance, if you just added a page, you might experience this). Our recommendation is to add hyperlint-ignore to the PR to ignore the link check for this PR.

[github-actions]

Preview URL: https://24ad19fa.preview.developers.cloudflare.com
Preview Branch URL: https://kian-pcx-16863.preview.developers.cloudflare.com

Files with changes (up to 15)

Original Link	Updated Link
https://developers.cloudflare.com/style-guide/components/api-request/	https://kian-pcx-16863.preview.developers.cloudflare.com/style-guide/components/api-request/
https://developers.cloudflare.com/style-guide/components/curl/	https://kian-pcx-16863.preview.developers.cloudflare.com/style-guide/components/curl/

[pedrosousa]

Nit:
I don't think it will affect any of our cURL/API examples, but I noticed that repeated keys in the query string are not supported by the component (it uses the last value only), while being a valid query string.

Example:

<CURL
  url="https://httpbin.org/anything"
  method="POST"
  json={{
    key: "va'l'ue",
  }}
  query={{
    foo: "bar",
    foo: "baz",
    bar: "baz",
  }}
  code={{
    mark: "value",
  }}
/>

Result:

curl "https://httpbin.org/anything?foo=baz&bar=baz" \
  --request POST \
  --json '{
    "key": "va'\''l'\''ue"
  }'

Expected result:

curl "https://httpbin.org/anything?foo=bar&foo=baz&bar=baz" \
  --request POST \
  --json '{
    "key": "va'\''l'\''ue"
  }'

MDN has a JavaScript example with a repeated key:

const url = new URL("https://example.com?foo=1&bar=2");
const params = new URLSearchParams(url.search);

// Add a second foo parameter.
params.append("foo", 4);
console.log(params.toString()); // Prints 'foo=1&bar=2&foo=4'

[KianNH]

Nit: I don't think it will affect any of our cURL/API examples, but I noticed that repeated keys in the query string are not supported by the component (it uses the last value only), while being a valid query string.

Example:

<CURL
  url="https://httpbin.org/anything"
  method="POST"
  json={{
    key: "va'l'ue",
  }}
  query={{
    foo: "bar",
    foo: "baz",
    bar: "baz",
  }}
  code={{
    mark: "value",
  }}
/>

Result:

curl "https://httpbin.org/anything?foo=baz&bar=baz" \
  --request POST \
  --json '{
    "key": "va'\''l'\''ue"
  }'

Expected result:

curl "https://httpbin.org/anything?foo=bar&foo=baz&bar=baz" \
  --request POST \
  --json '{
    "key": "va'\''l'\''ue"
  }'

MDN has a JavaScript example with a repeated key:

const url = new URL("https://example.com?foo=1&bar=2");
const params = new URLSearchParams(url.search);

// Add a second foo parameter.
params.append("foo", 4);
console.log(params.toString()); // Prints 'foo=1&bar=2&foo=4'

Added support for this in 52177d9 - something like query: { foo: ["bar", "baz"] } would now result in ?foo=bar&foo=baz.

[pedrosousa]

@KianNH We should probably update the type here, since we now support Array values.