Skip to content

Commit

Permalink
chore(docs): Restore dynamic function routing docs (#33641)
Browse files Browse the repository at this point in the history
We removed them in #31809 as the cloud implementation wasn't
yet done. But now it is!
  • Loading branch information
KyleAMathews committed Oct 22, 2021
1 parent ef5e821 commit 7147715
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 1 deletion.
8 changes: 7 additions & 1 deletion docs/docs/reference/functions/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,13 @@ A Function file must export a single function that takes two parameters:
- `req`: Node's [http request object](https://nodejs.org/api/http.html#http_class_http_incomingmessage) with some [automatically parsed data](/docs/reference/functions/getting-started/#common-data-formats-are-automatically-parsed)
- `res`: Node's [http response object](https://nodejs.org/api/http.html#http_class_http_serverresponse) with some [extra helper functions](/docs/reference/functions/middleware-and-helpers/#res-helpers)

Dynamic routing is supported for creating REST-ful APIs and other uses cases

- `/api/users` => `src/api/users/index.js`
- `/api/users/23` => `src/api/users/[id].js`

[Learn more about dynamic routes.](/docs/reference/functions/routing#dynamic-routing)

## Typescript

Functions can be written in JavaScript or Typescript.
Expand Down Expand Up @@ -202,5 +209,4 @@ Shadowing with functions works similar to how shadowing works in general. You ca

## Limitations

- Gatsby Functions do not support dynamic routes in Gatsby Cloud at the moment
- Bundling in native dependencies is not supported at the moment
36 changes: 36 additions & 0 deletions docs/docs/reference/functions/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,45 @@ title: Routing

Function routing shares the same syntax as [page routing](/docs/reference/routing/file-system-route-api/).

## Static Routing

Both top-level and nested routes are supported.

- `src/api/top-level.js` => `/api/top-level`
- `src/api/directory/foo.js` => `/api/directory/foo`

`index.js` files are routed at their directory path e.g. `src/api/users/index.js` => `/api/users`

## Dynamic Routing

_Note: Dynamic Routing is not yet supported on Gatsby Cloud. Expect it in another few weeks. It will work locally._

### Param routes

Use square brackets (`[ ]`) in the file path to mark dynamic segments of the URL.

So to create an Function for fetching user information by `userId`:

```js:title=src/api/users/[id].js
export default async function handler(req, res) {
const userId = req.params.id
// Fetch user
const user = await getUser(userId)
res.json(user)
}
```

Dynamic routes share syntax with [client-only routes](/docs/reference/routing/file-system-route-api/#creating-client-only-routes).

### Splat routes

Gatsby also supports splat (or wildcard) routes, which are routes that will match anything after the splat. These are less common, but still have use cases.

```js:title=src/api/foo/[...].js
export default function handler(req, res) {
const params = req.params[`*`].split(`/`)

// `src/api/foo/1/2 // params[0] === `1`
// params[1] === `2`
}
```

0 comments on commit 7147715

Please sign in to comment.