Skip to content

Commit

Permalink
chore(docs): Clean up documentation for Functions (#31809)
Browse files Browse the repository at this point in the history
  • Loading branch information
sidharthachatterjee authored Jun 8, 2021
1 parent 34b6d47 commit af692f7
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 51 deletions.
28 changes: 15 additions & 13 deletions docs/docs/reference/functions/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
title: Getting Started
examples:
- label: Authenticate with Google Auth
href: "https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/google-auth"
href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/functions-google-auth"
- label: Authenticate with Auth0
href: "https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/auth0"
href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/functions-auth0"
- label: Submit form to Airtable
href: "https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/airtable-form"
href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/functions-airtable-form"
- label: Send email with SendGrid
href: "https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/sendgrid-email"
href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/functions-sendgrid-email"
- label: Basic form that submits to a Function
href: "https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/basic-form"
href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/functions-basic-form"
---

Gatsby Functions help you build [Express-like](https://expressjs.com/) backends without running servers.
Expand All @@ -34,13 +34,6 @@ 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 @@ -83,6 +76,10 @@ export default function handler(req, res) {
}
```

## Headers

Only HTTP headers prefixed with `x-gatsby-` are passed into your functions.

## Environment variables

Site [environment variables](/docs/how-to/local-development/environment-variables) are used to pass secrets and environment-specific configuration to Functions.
Expand Down Expand Up @@ -123,7 +120,7 @@ export default async function postNewPersonHandler(req, res) {

## Forms

Forms and Functions are often used together. For a working example you can play with locally, see the [form example](https://github.com/gatsbyjs/gatsby-functions-beta/tree/main/examples/basic-form). The [Forms doc page](/docs/how-to/adding-common-features/adding-forms/) is a gentle introduction for building forms in React. Below is sample code for a very simple form that submits to a function that you can use as a basis for building out forms in Gatsby.
Forms and Functions are often used together. For a working example you can play with locally, see the [form example](https://github.com/gatsbyjs/gatsby/tree/master/examples/functions-basic-form). The [Forms doc page](/docs/how-to/adding-common-features/adding-forms/) is a gentle introduction for building forms in React. Below is sample code for a very simple form that submits to a function that you can use as a basis for building out forms in Gatsby.

```js:title=src/api/form.js
export default function formHandler(req, res) {
Expand Down Expand Up @@ -192,3 +189,8 @@ export default function FormPage() {
)
}
```

## Limitations

- Gatsby Functions do not support dynamic routes in Gatsby Cloud at the moment
- Bundling in native dependencies is not supported at the moment
38 changes: 0 additions & 38 deletions docs/docs/reference/functions/routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,9 @@ 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[`0`].split(`/`)

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

0 comments on commit af692f7

Please sign in to comment.