graphql Documentation

File: README.md Copy Chapter

by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than
250 amazing contributors (see end of file for a full list).

NOTE

⚡ Big News — We’ve launched RedwoodSDK, a modern React framework for building full-stack web apps on Cloudflare.

🌲 RedwoodSDK — React on Cloudflare Copy Chapter

RedwoodSDK starts as a Vite plugin and unlocks:

• SSR (Server-Side Rendering)
• React Server Components
• Server Functions
• Streaming + Realtime
• Local dev parity with Miniflare
• First-class Cloudflare services: Workers, D1, Durable Objects, R2, Queues, and more

All while keeping to web standards — you write with native Request/Response and the modern Web APIs you already know.

🚀 Try it in seconds Copy Section

npx create-rwsdk my-project-name
cd my-project-name
npm run dev

📚 Read the docs
⚡ Quick Start Guide

🙌 How You Can Help Copy Chapter

We’d love for the Redwood community to be part of this from day one:

1. Try it out — Follow the Quick Start and build something small.
2. Give feedback — Tell us what works, what’s confusing, and what could be better.
3. Spread the word — Share RedwoodSDK with your friends, coworkers, and followers.
4. Star the repo — Stars help more developers discover RedwoodSDK.

📌 Links Copy Chapter

• ⭐ Star RedwoodSDK: https://github.com/redwoodjs/sdk
• 📚 Docs: https://docs.rwsdk.com
• 💬 Discord: https://discord.gg/redwoodjs
• 🌐 Website: https://rwsdk.com

Thank you for being part of the Redwood journey — we can’t wait to see what you build with RedwoodSDK! ❤️

RedwoodJS GraphQL

Bighorn Epoch (current development epoch) Copy Chapter

NOTE: This section of the Readme is aspirational for the current development
epoch we call Bighorn. Bighorn has not yet been released, but when it is, it will
fulfill the promises of what you read below. If you’d like to help us on this
journey, please say hi in the Community Forums!

Redwood is a framework for quickly creating React-based web applications that
provide an amazing end user experience. Our goal is to be simple and approachable
enough for use in prototypes and hackathons, but performant and comprehensive enough
to evolve into your next startup.

We accomplish this in two primary ways:

1. Redwood is opinionated and full-stack. We’ve chosen the best technologies in the
   JS/TS ecosystem and beautifully integrated them into a cohesive framework that
   lets you get things done instead of endlessly evaluating technology options. You
   can get started using Redwood without a backend, but the framework really shines
   when you’re building a data driven application. Our transparent data fetching and
   optional GraphQL API make building and growing your application easier than you
   expect!

2. Redwood’s declarative data fetching and simple form submission features are built
   on top of RSC + Server Actions and simplify common use cases so you can focus on
   your users’ experience. Creating the best, most responsive user interfaces
   requires reasoning about whether code should execute on the server or the client.
   Redwood makes it easy to choose the best execution context for your code by
   leveraging the power of React Server Components.

The entire framework is built with TypeScript, so you get type safety from the router
to the database and everywhere in-between. If you’d rather build your app with
JavaScript, you can do that too, and still enjoy great code completion features in
your favorite editor.

TRY BIGHORN: While Bighorn does not yet have a production release, we do
publish the latest code as canaries, and we welcome you to experiment with them!
The best way to get familiar with these canaries is to keep an eye on the Redwood
Blog.

Arapahoe Epoch (current stable release) Copy Chapter

Redwood is an opinionated, full-stack, JavaScript/TypeScript web application
framework designed to keep you moving fast as your app grows from side project to
startup.

At the highest level, a Redwood app is a React frontend that talks to a custom
GraphQL API. The API uses Prisma to operate on a database. Out of the box you get
tightly integrated testing with Jest, logging with Pino, and a UI component catalog
with Storybook. Setting up authentication (like Auth0) or CSS frameworks (like
Tailwind CSS) are a single command line invocation away. And to top it off, Redwood's
architecture allows you to deploy to either serverless providers (e.g. Netlify,
Vercel) or traditional server and container providers (e.g. AWS, Render) with nearly
no code changes between the two!

By making a lot of decisions for you, Redwood lets you get to work on what makes your
application special, instead of wasting cycles choosing and re-choosing various
technologies and configurations. Plus, because Redwood is a proper framework, you
benefit from continued performance and feature upgrades over time and with minimum
effort.

TUTORIAL: The best way to get to know Redwood is by going through the
extensive Redwood Tutorial. Have fun!

QUICK START: You can install and run a full-stack Redwood application on
your machine with only a couple commands. Check out the Quick
Start guide to get started.

DOCS: Visit the full RedwoodJS
Documentation for extensive reference
docs and guides.

About Copy Chapter

Redwood is the latest open source project initiated by Tom Preston-Werner, cofounder
of GitHub (most popular code host on the planet), creator of Jekyll (one of the first
and most popular static site generators), creator of Gravatar (the most popular
avatar service on the planet), author of the Semantic Versioning specification
(powers the Node packaging ecosystem), and inventor of TOML (an obvious, minimal
configuration language used by many projects).

Technologies Copy Chapter

We are obsessed with developer experience and eliminating as much boilerplate as
possible. Where existing libraries elegantly solve our problems, we use them;
where they don't, we write our own solutions. The end result is a JavaScript
development experience you can fall in love with!

Here's a quick taste of the technologies a standard Redwood application will
use:

• React
• Vite
• Prisma
• Jest
• Storybook
• Pino

If you'd like to use our optional built-in GraphQL API support, here's our stack:

• GraphQL
• GraphQL Yoga
• Envelop
• Apollo Client

Roadmap Copy Chapter

A framework like Redwood has a lot of moving parts; the Roadmap is a great way
to get a high-level overview of where the framework is relative to where we want
it to be. And since we link to all of our GitHub project boards, it's also a
great way to get involved! Roadmap

Why is it called Redwood? Copy Chapter

(A history, by Tom Preston-Werner)

Where I live in Northern California there is a type of tree called a redwood.
Redwoods are HUGE, the tallest in the world, some topping out at 115 meters (380
feet) in height. The eldest of the still-living redwoods sprouted from the
ground an astonishing 3,200 years ago. To stand among them is transcendent.
Sometimes, when I need to think or be creative, I will journey to my favorite
grove of redwoods and walk among these giants, soaking myself in their silent
grandeur.

In addition, Redwoods have a few properties that I thought would be aspirational
for my nascent web app framework. Namely:

• Redwoods are beautiful as saplings, and grow to be majestic. What if you
  could feel that way about your web app?

• Redwood pinecones are dense and surprisingly small. Can we allow you to
  get more done with less code?

• Redwood trees are resistant to fire. Surprisingly robust to disaster
  scenarios, just like a great web framework should be!

• Redwoods appear complex from afar, but simple up close. Their branching
  structure provides order and allows for emergent complexity within a simple
  framework. Can a web framework do the same?

And there you have it.

Contributors Copy Chapter

A gigantic "Thank YOU!" to everyone below who has contributed to one or more Redwood projects: Framework, Website, Docs, and Create-Redwood Template. 🚀

Core Team: Leadership Copy Section

Core Team: Maintainer and Community Leads Copy Section

Founders Copy Section

Core Team: Alumni Copy Section

All Contributors Copy Section

Redwood projects (mostly) follow the all-contributions specification. Contributions of any kind are welcome.

File: __fixtures__/test-project-rsc-kitchen-sink/web/public/README.md Copy Chapter

Static Assets

Use this folder to add static files directly to your app. All included files and folders will be copied directly into the /dist folder (created when Vite builds for production). They will also be available during development when you run yarn rw dev.

Note: files will not hot reload while the development server is running. You'll need to manually stop/start to access file changes.

Example Use Copy Section

A file like favicon.png will be copied to /dist/favicon.png. A folder containing a file such as static-files/my-logo.jpg will be copied to /dist/static-files/my-logo.jpg. These can be referenced in your code directly without any special handling, e.g.

<link rel="icon" type="image/png" href="/favicon.png" />

and

alt="Logo" />

Best Practices Copy Chapter

Because assets in this folder are bypassing the javascript module system, this folder should be used sparingly for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.

In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the dist folder with a hash.

Example Asset Import with Vite Copy Section

Instead of handling our logo image as a static file per the example above, we can do the following:

import React from "react"
import logo from "./my-logo.jpg"


function Header() {
  return 
}

export default Header

See Vite's docs for static asset handling

File: __fixtures__/test-project-rsc-kitchen-sink/README.md Copy Chapter

RW smoke-test fixture project for an app that tests two RSC related features

1. imports external npm packages
2. Uses client cells to do client-side gql data fetching

Mainly these things are tested:

• Importing a package with company scope (@ and / in its name)
• Importing a package that uses the 'use client' directive
• Using the 'client-only' package
• Using the 'server-only' package
• Imports a traditional RW Cell into a page (that's, like all pages, a server
  component) to verify that we can still do client side GQL data fetching
  like we've always been able to do

Used by .github/actions/set-up-rsc-from-fixture

File: __fixtures__/test-project-rsa/web/public/README.md Copy Chapter

Static Assets

Use this folder to add static files directly to your app. All included files and folders will be copied directly into the /dist folder (created when Vite builds for production). They will also be available during development when you run yarn rw dev.

Note: files will not hot reload while the development server is running. You'll need to manually stop/start to access file changes.

Example Use Copy Section

A file like favicon.png will be copied to /dist/favicon.png. A folder containing a file such as static-files/my-logo.jpg will be copied to /dist/static-files/my-logo.jpg. These can be referenced in your code directly without any special handling, e.g.

<link rel="icon" type="image/png" href="/favicon.png" />

and

alt="Logo" />

Best Practices Copy Chapter

Because assets in this folder are bypassing the javascript module system, this folder should be used sparingly for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.

In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the dist folder with a hash.

Example Asset Import with Vite Copy Section

Instead of handling our logo image as a static file per the example above, we can do the following:

import React from "react"
import logo from "./my-logo.jpg"


function Header() {
  return 
}

export default Header

See Vite's docs for static asset handling

File: __fixtures__/test-project-rsa/README.md Copy Chapter

RW smoke-test fixture project for RSAs with Forms

Used by .github/actions/set-up-rsc-from-fixture

File: __fixtures__/test-project/web/public/README.md Copy Chapter

Static Assets

Use this folder to add static files directly to your app. All included files and folders will be copied directly into the /dist folder (created when Vite builds for production). They will also be available during development when you run yarn rw dev.

Note: files will not hot reload while the development server is running. You'll need to manually stop/start to access file changes.

Example Use Copy Section

A file like favicon.png will be copied to /dist/favicon.png. A folder containing a file such as static-files/my-logo.jpg will be copied to /dist/static-files/my-logo.jpg. These can be referenced in your code directly without any special handling, e.g.

<link rel="icon" type="image/png" href="/favicon.png" />

and

alt="Logo" />

Best Practices Copy Chapter

Because assets in this folder are bypassing the javascript module system, this folder should be used sparingly for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.

In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the dist folder with a hash.

Example Asset Import with Vite Copy Section

Instead of handling our logo image as a static file per the example above, we can do the following:

import React from "react"
import logo from "./my-logo.jpg"


function Header() {
  return 
}

export default Header

See Vite's docs for static asset handling

File: __fixtures__/test-project/README.md Copy Chapter

README

Welcome to RedwoodJS!

Prerequisites

• Redwood requires Node.js (=20.x) and Yarn
• Are you on Windows? For best results, follow our Windows development setup guide

Start by installing dependencies:

yarn install

Then start the development server:

yarn redwood dev

Your browser should automatically open to http://localhost:8910 where you'll see the Welcome Page, which links out to many great resources.

The Redwood CLI

Congratulations on running your first Redwood CLI command! From dev to deploy, the CLI is with you the whole way. And there's quite a few commands at your disposal:

text Copy

yarn redwood --help

For all the details, see the CLI reference.

Prisma and the database Copy Chapter

Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the schema.prisma file in api/db and replace the UserExample model with the following Post model:

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
}

Redwood uses Prisma, a next-gen Node.js and TypeScript ORM, to talk to the database. Prisma's schema offers a declarative way of defining your app's data models. And Prisma Migrate uses that schema to make database migrations hassle-free:

yarn rw prisma migrate dev

# ...

? Enter a name for the new migration: › create posts

rw is short for redwood

You'll be prompted for the name of your migration. create posts will do.

Now let's generate everything we need to perform all the CRUD (Create, Retrieve, Update, Delete) actions on our Post model:

yarn redwood generate scaffold post

Navigate to http://localhost:8910/posts/new, fill in the title and body, and click "Save".

Did we just create a post in the database? Yup! With yarn rw generate scaffold <model>, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.

Frontend first with Storybook Copy Chapter

Don't know what your data models look like? That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data. Mockup, build, and verify your React components, even in complete isolation from the backend:

yarn rw storybook

Seeing "Couldn't find any stories"? That's because you need a *.stories.{tsx,jsx} file. The Redwood CLI makes getting one easy enough—try generating a Cell, Redwood's data-fetching abstraction:

yarn rw generate cell examplePosts

The Storybook server should hot reload and now you'll have four stories to work with. They'll probably look a little bland since there's no styling. See if the Redwood CLI's setup ui command has your favorite styling library:

yarn rw setup ui --help

Testing with Jest Copy Chapter

It'd be hard to scale from side project to startup without a few tests. Redwood fully integrates Jest with both the front- and back-ends, and makes it easy to keep your whole app covered by generating test files with all your components and services:

yarn rw test

To make the integration even more seamless, Redwood augments Jest with database scenarios and GraphQL mocking.

Ship it Copy Chapter

Redwood is designed for both serverless deploy targets like Netlify and Vercel and serverful deploy targets like Render and AWS:

yarn rw setup deploy --help

Don't go live without auth! Lock down your app with Redwood's built-in, database-backed authentication system (dbAuth), or integrate with nearly a dozen third-party auth providers:

yarn rw setup auth --help

Next Steps Copy Chapter

The best way to learn Redwood is by going through the comprehensive tutorial and joining the community (via the Discourse forum or the Discord server).

Quick Links Copy Chapter

• Stay updated: read Forum announcements, follow us on Twitter, and subscribe to the newsletter
• Learn how to contribute

File: __fixtures__/rsc-caching/web/public/README.md Copy Chapter

Static Assets

Use this folder to add static files directly to your app. All included files and folders will be copied directly into the /dist folder (created when Vite builds for production). They will also be available during development when you run yarn rw dev.

Note: files will not hot reload while the development server is running. You'll need to manually stop/start to access file changes.

Example Use Copy Section

A file like favicon.png will be copied to /dist/favicon.png. A folder containing a file such as static-files/my-logo.jpg will be copied to /dist/static-files/my-logo.jpg. These can be referenced in your code directly without any special handling, e.g.

<link rel="icon" type="image/png" href="/favicon.png" />

and

alt="Logo" />

Best Practices Copy Chapter

Because assets in this folder are bypassing the javascript module system, this folder should be used sparingly for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.

In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the dist folder with a hash.

Example Asset Import with Vite Copy Section

Instead of handling our logo image as a static file per the example above, we can do the following:

import React from "react"
import logo from "./my-logo.jpg"


function Header() {
  return 
}

export default Header

See Vite's docs for static asset handling

File: __fixtures__/fragment-test-project/web/public/README.md Copy Chapter

Static Assets

Use this folder to add static files directly to your app. All included files and folders will be copied directly into the /dist folder (created when Vite builds for production). They will also be available during development when you run yarn rw dev.

Note: files will not hot reload while the development server is running. You'll need to manually stop/start to access file changes.

Example Use Copy Section

A file like favicon.png will be copied to /dist/favicon.png. A folder containing a file such as static-files/my-logo.jpg will be copied to /dist/static-files/my-logo.jpg. These can be referenced in your code directly without any special handling, e.g.

<link rel="icon" type="image/png" href="/favicon.png" />

and

alt="Logo" />

Best Practices Copy Chapter

Because assets in this folder are bypassing the javascript module system, this folder should be used sparingly for assets such as favicons, robots.txt, manifests, libraries incompatible with Vite, etc.

In general, it's best to import files directly into a template, page, or component. This allows Vite to include that file in the bundle when small enough, or to copy it over to the dist folder with a hash.

Example Asset Import with Vite Copy Section

Instead of handling our logo image as a static file per the example above, we can do the following:

import React from "react"
import logo from "./my-logo.jpg"


function Header() {
  return 
}

export default Header

See Vite's docs for static asset handling