Queries and Resources

The Decode dashboard lets you edit queries and resources. A query tells Decode how to get data from a resource. If a resource is a Postgres database, its queries are SQL statements. If a resource is an HTTP server, its queries are individual HTTP requests.

Client-side SDK

useDecode

Underneath the hood, useDecode wraps the SWR library. You can find the docs for SWR here:

📔https://github.com/vercel/swr

So, if you know how to do something with SWR, you can probably do it with useDecode!

The key difference: You pass in an endpoint and a fetcher function to SWR, like so:

let { data, error } = useSWR('/api/users', fetcher)

Whereas all you need to pass to useDecode is a slug, like so:

let { data, error } = useDecode('getUser')

In addition, you can optionally pass in a "transform" function, like this:

import camelcaseKeys from "camelcase-keys";

// ...

let { data, error } = useDecode('getUser', camelcaseKeys)

The transform function runs after the results are received from Decode but before they are cached by SWR. So, the data is in its "post transformation" state throughout your React app.

Put another way, this is the pipeline:

fetched from decode
|> transformed by transform function
|> cached and returned

useFetcher

Decode also supports making one-off requests with useFetcher. You use a fetcher function whenever you want to make write requests through Decode.

Grab a fetcher function near the top of your component:

const App = () => {
  let fetcher = useFetcher()
  // ...