From 580e079ec79845c184dd32785ca9aa72f7e33cd8 Mon Sep 17 00:00:00 2001 From: Brett Beutell Date: Fri, 23 Aug 2024 08:45:58 +0200 Subject: [PATCH] Tweak making-requests --- .../docs/docs/features/making-requests.mdx | 52 ++++++++++++------- 1 file changed, 34 insertions(+), 18 deletions(-) diff --git a/www/src/content/docs/docs/features/making-requests.mdx b/www/src/content/docs/docs/features/making-requests.mdx index c0542055c..5eb28a6c0 100644 --- a/www/src/content/docs/docs/features/making-requests.mdx +++ b/www/src/content/docs/docs/features/making-requests.mdx @@ -1,6 +1,6 @@ --- -title: Making requests -description: Tutorial on requests in studio +title: Making Requests +description: Tutorial on how to make HTTP requests in Fiberplane Studio sidebar: order: 1 --- @@ -8,6 +8,7 @@ sidebar: import { Image } from 'astro:assets'; import { Aside } from '@astrojs/starlight/components'; import { LinkCard } from '@astrojs/starlight/components'; +import { Card } from '@astrojs/starlight/components'; import FirstRequest from '@/assets/making-requests--make-request.gif'; import CreateGoose from '@/assets/making-requests--create-goose.png'; @@ -24,18 +25,20 @@ Once you're up and running locally, the first page you see in Studio leaves you First request -"What just happened there?" You might be asking yourself. + +## Your First Request When using Fiberplane Studio with the [Hono client library](/docs/components/client-library/), Studio automatically detects the routes in your Hono API and displays them in the sidebar. -In this case, the first route, `GET /`, is selected by default, and by clicking "Send", we make a request to our API and see the response in the panel below. -(Not shown: If there were any logs along the way, we can see them in the "Debug" section.) +In the example above, the first route, `GET /`, is selected by default. By clicking "Send", we make a request to our API, +and see the response in the panel below. If there were any logs along the way, we can see them in the "Debug" section. -We can repeat this process for any of the routes in our API, adding whatever query parameters, headers or body payloads we need. +We can repeat this process for any of the routes in our API, adding whatever query parameters, headers, or body payloads we need. -## Request Body Payloads +## Request Bodies -We love JSON. We're huge fans. To that end, request body payloads in Studio are JSON by default. If you had a route like `POST /api/geese`, you could fill in the request body as follows: +We love JSON. It's a great data format, and we're huge fans. +To that end, request body payloads in Studio are JSON by default. If you have a route like `POST /api/geese`, you can fill in the request body as follows: Create goose @@ -45,13 +48,15 @@ To modify the body payload, click the body selector along the bottom of the requ Body selector -This will render a different UI form depending on the body payload, and if necessary, change the `Content-Type` header to match the type of the body you're sending. +This will render different inputs depending on the body payload, and when necessary, change the `Content-Type` header to match the type of the body you're sending. Let's see how we would send the same body payload as before, but this time as an `application/x-www-form-urlencoded` request. Form Data example body payload -If you attach a file to a form, the file will be sent as a multipart/form-data request. If you just want to send a file, you can attach it directly to the request, and it will be sent with the content-type `application/octet-stream`, unless you specify otherwise. +In this case, we selected `Form` from the dropdown, and Studio rendered a form with fields for each of the properties in our Goose object. We can also attach a file to a form, and it will be sent as a `multipart/form-data` request. + +If you just want to send a file, you can attach it directly to the request, and it will be sent with the content-type `application/octet-stream`, unless you specify otherwise. ## Request History @@ -62,15 +67,18 @@ In the routes sidebar, there's a section called "History". This is where you can Click on a request in the history, and you'll see the details of the corresponding request and response appear in the main panels. If you want to re-run the request, just click the "Send" button again! -## Custom routes (e.g., OpenAPI) +## Custom Routes What if you want to make a request to an API route that isn't detected via the Client Library? Or perhaps to a staging service? We got you covered. -In the routes panel, click the "+" button and select "Custom Route". Add the url and method you want to use, and click "Save". +In the routes panel, click the `+` button and select "Custom Route". Add the url and method you want to use, and click "Save". Custom routes -If you have an OpenAPI spec handy, you can also import it here, and all your routes will be automatically added to the sidebar. + +### Importing OpenAPI Specs + +If you have an OpenAPI spec handy, you can also import it by clicking the `+` button. All your routes will be automatically added to the sidebar.