Top Related Projects
A reference implementation of GraphQL for JavaScript
🌍 Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.
🧘 Rewrite of a fully-featured GraphQL Server with focus on easy setup, performance & great developer experience. The core of Yoga implements WHATWG Fetch API and can run/deploy on any JS environment.
Blazing fast, instant realtime GraphQL APIs on all your data with fine grained access control, also trigger webhooks on database events.
Awesome list of GraphQL
Code-First, Type-Safe, GraphQL Schema Construction
Quick Overview
RedwoodJS GraphQL is a core component of the RedwoodJS framework, providing a powerful and flexible GraphQL implementation. It integrates seamlessly with other RedwoodJS components, offering a streamlined approach to building full-stack JavaScript applications with GraphQL as the data layer.
Pros
- Seamless integration with RedwoodJS ecosystem
- Automatic schema generation based on Prisma models
- Built-in support for GraphQL Playground and introspection
- Easy-to-use API for creating custom resolvers and services
Cons
- Tightly coupled with RedwoodJS, limiting standalone use
- Learning curve for developers new to GraphQL or RedwoodJS
- Limited customization options compared to some other GraphQL libraries
- Documentation could be more comprehensive for advanced use cases
Code Examples
- Defining a GraphQL schema:
type User {
id: Int!
name: String!
email: String!
posts: [Post]!
}
type Post {
id: Int!
title: String!
content: String!
author: User!
}
type Query {
users: [User]!
user(id: Int!): User
posts: [Post]!
post(id: Int!): Post
}
- Creating a custom resolver:
export const User = {
posts: (_obj, { root }) =>
db.user.findUnique({ where: { id: root.id } }).posts(),
}
export const Query = {
users: () => db.user.findMany(),
user: (_root, { id }) => db.user.findUnique({ where: { id } }),
}
- Using GraphQL in a RedwoodJS component:
import { useQuery } from '@redwoodjs/web'
const GET_USERS = gql`
query GetUsers {
users {
id
name
email
}
}
`
const UserList = () => {
const { loading, error, data } = useQuery(GET_USERS)
if (loading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
return (
<ul>
{data.users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}
Getting Started
To get started with RedwoodJS GraphQL:
-
Create a new RedwoodJS project:
yarn create redwood-app my-redwood-app cd my-redwood-app
-
Generate a new GraphQL schema:
yarn rw g sdl User
-
Start the development server:
yarn rw dev
-
Access GraphQL Playground at
http://localhost:8911/graphql
to explore your API.
Competitor Comparisons
A reference implementation of GraphQL for JavaScript
Pros of graphql-js
- More mature and widely adopted implementation of GraphQL for JavaScript
- Extensive documentation and community support
- Flexible and can be used with various frameworks and libraries
Cons of graphql-js
- Requires more setup and configuration for complex applications
- Less opinionated, which may lead to inconsistent implementations across projects
- Steeper learning curve for beginners
Code Comparison
graphql-js:
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = require('graphql');
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'RootQueryType',
fields: {
hello: {
type: GraphQLString,
resolve() {
return 'Hello, World!';
},
},
},
}),
});
redwoodjs/graphql:
export const schema = gql`
type Query {
hello: String!
}
`
export const resolvers = {
Query: {
hello: () => {
return 'Hello, World!'
},
},
}
The redwoodjs/graphql implementation is more concise and follows a convention-over-configuration approach, making it easier for developers to get started quickly. However, graphql-js offers more granular control over the schema definition and resolver implementation, which can be beneficial for complex use cases.
🌍 Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.
Pros of Apollo Server
- More mature and widely adopted in the GraphQL ecosystem
- Extensive documentation and community support
- Flexible and can be used with various frameworks and databases
Cons of Apollo Server
- Steeper learning curve for beginners
- Requires more setup and configuration compared to RedwoodJS GraphQL
- May be overkill for smaller projects or simple GraphQL implementations
Code Comparison
Apollo Server setup:
const { ApolloServer } = require('apollo-server');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
RedwoodJS GraphQL setup:
import { createGraphQLHandler } from '@redwoodjs/graphql-server'
import schemas from 'src/graphql/**/*.{js,ts}'
import services from 'src/services/**/*.{js,ts}'
export const handler = createGraphQLHandler({
schemas,
services,
})
RedwoodJS GraphQL offers a more streamlined setup process, automatically integrating with the RedwoodJS framework. Apollo Server provides more flexibility but requires manual configuration. Both solutions are powerful, with Apollo Server being more suitable for complex, standalone GraphQL implementations, while RedwoodJS GraphQL excels in rapid development within the RedwoodJS ecosystem.
🧘 Rewrite of a fully-featured GraphQL Server with focus on easy setup, performance & great developer experience. The core of Yoga implements WHATWG Fetch API and can run/deploy on any JS environment.
Pros of GraphQL Yoga
- Lightweight and flexible GraphQL server with minimal setup
- Built-in support for subscriptions and file uploads
- Extensive plugin ecosystem for easy customization
Cons of GraphQL Yoga
- Less opinionated structure compared to RedwoodJS GraphQL
- May require more manual configuration for complex setups
- Not as tightly integrated with a full-stack framework
Code Comparison
GraphQL Yoga:
import { createServer } from '@graphql-yoga/node'
const server = createServer({
schema: {
typeDefs: /* GraphQL */ `
type Query {
hello: String
}
`,
resolvers: {
Query: {
hello: () => 'Hello from Yoga!'
}
}
}
})
server.start()
RedwoodJS GraphQL:
import { createGraphQLHandler } from '@redwoodjs/graphql-server'
import schemas from 'src/graphql/**/*.{js,ts}'
import services from 'src/services/**/*.{js,ts}'
export const handler = createGraphQLHandler({
schemas,
services,
})
This comparison highlights the differences in setup and configuration between GraphQL Yoga and RedwoodJS GraphQL. GraphQL Yoga offers a more flexible approach with its server creation, while RedwoodJS GraphQL provides a more structured and opinionated setup within the RedwoodJS framework.
Blazing fast, instant realtime GraphQL APIs on all your data with fine grained access control, also trigger webhooks on database events.
Pros of GraphQL Engine
- Provides instant, real-time GraphQL APIs over existing databases
- Offers built-in authorization and authentication features
- Supports multiple databases, including PostgreSQL, MySQL, and SQL Server
Cons of GraphQL Engine
- Steeper learning curve for developers new to GraphQL or Hasura's ecosystem
- May require additional configuration for complex data relationships
- Limited flexibility in customizing the underlying database schema
Code Comparison
GraphQL Engine:
type Query {
users(limit: Int): [User!]!
}
type User {
id: Int!
name: String!
email: String!
}
RedwoodJS GraphQL:
export const schema = gql`
type Query {
users: [User!]!
}
type User {
id: Int!
name: String!
email: String!
}
`
GraphQL Engine focuses on generating GraphQL APIs from existing databases, while RedwoodJS GraphQL is part of a full-stack framework that includes GraphQL API creation. GraphQL Engine offers more out-of-the-box features for database integration and real-time capabilities, whereas RedwoodJS GraphQL provides a more customizable approach within its framework ecosystem. The code comparison shows similar GraphQL schema definitions, but GraphQL Engine's approach is more declarative, while RedwoodJS allows for more programmatic control over the schema and resolvers.
Awesome list of GraphQL
Pros of awesome-graphql
- Comprehensive collection of GraphQL resources, tools, and libraries
- Community-driven with regular updates and contributions
- Covers a wide range of GraphQL-related topics and ecosystems
Cons of awesome-graphql
- Not a functional library or framework, just a curated list
- May include outdated or less maintained resources
- Lacks specific implementation details or code examples
Code comparison
While awesome-graphql doesn't contain actual code, it provides links to various GraphQL implementations and tools. On the other hand, graphql is a functional library within the RedwoodJS framework. Here's a basic example of how you might use GraphQL in a RedwoodJS project:
// graphql
import { createGraphQLHandler } from '@redwoodjs/graphql-server'
export const handler = createGraphQLHandler({
loggerConfig: { logger, options: {} },
directives,
sdls,
services,
onException: () => {
// Implement error handling
},
})
awesome-graphql would simply provide a link to the RedwoodJS documentation or similar resources for implementing GraphQL in various frameworks and languages.
Code-First, Type-Safe, GraphQL Schema Construction
Pros of Nexus
- More flexible and customizable schema definition
- Better TypeScript integration with auto-generated types
- Extensive plugin ecosystem for additional features
Cons of Nexus
- Steeper learning curve for beginners
- Requires more boilerplate code for basic setups
- Less opinionated, which may lead to inconsistent implementations
Code Comparison
Nexus:
import { objectType, queryType, makeSchema } from '@nexus/schema'
const User = objectType({
name: 'User',
definition(t) {
t.string('id')
t.string('name')
},
})
const Query = queryType({
definition(t) {
t.list.field('users', {
type: 'User',
resolve: () => [{ id: '1', name: 'Alice' }],
})
},
})
const schema = makeSchema({
types: [Query, User],
})
GraphQL (RedwoodJS):
export const schema = gql`
type User {
id: String!
name: String!
}
type Query {
users: [User!]!
}
`
export const resolvers = {
Query: {
users: () => [{ id: '1', name: 'Alice' }],
},
}
The Nexus approach offers more programmatic control over schema definition, while the RedwoodJS GraphQL setup is more declarative and concise. Nexus provides better TypeScript integration, but RedwoodJS GraphQL may be easier for beginners to understand and implement quickly.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
RedwoodGraphQL
by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than 250 amazing contributors (see end of file for a full list).
Bighorn Epoch (current development epoch)
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:
-
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!
-
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)
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
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
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:
If you'd like to use our optional built-in GraphQL API support, here's our stack:
Roadmap
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?
(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
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
Amy Haywood Dutton |
David Price |
Tobbe Lundberg |
Tom Preston-Werner |
Core Team: Maintainer and Community Leads
David Thyresson maintainer |
Daniel Choudhury maintainer |
Keith T Elliot community |
Barrett Burnworth community |
Josh GM Walker maintainer |
Founders
Tom Preston-Werner |
Peter Pistorius |
Rob Cameron |
David Price |
Core Team: Alumni
All Contributors
Redwood projects (mostly) follow the all-contributions specification. Contributions of any kind are welcome.
Top Related Projects
A reference implementation of GraphQL for JavaScript
🌍 Spec-compliant and production ready JavaScript GraphQL server that lets you develop in a schema-first way. Built for Express, Connect, Hapi, Koa, and more.
🧘 Rewrite of a fully-featured GraphQL Server with focus on easy setup, performance & great developer experience. The core of Yoga implements WHATWG Fetch API and can run/deploy on any JS environment.
Blazing fast, instant realtime GraphQL APIs on all your data with fine grained access control, also trigger webhooks on database events.
Awesome list of GraphQL
Code-First, Type-Safe, GraphQL Schema Construction
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot