A modern React & GraphQL setup with step-by-step lessons made for a full day pre-conference workshop
MIT License
Welcome to the GraphQL workshop for React developers! ☀️
In this workshop, we'll be building a Twitter clone using GraphQL and React. We'll be using GraphQL Yoga for the GraphQL server and Apollo Client for the React app.
git clone https://github.com/glennreyes/react-graphql-workshop.git
cd react-graphql-workshop
pnpm install
pnpm dev
Create a query hello
that takes an argument name
. Based on what the user inputs, return a greeting. For example, if the user inputs Glenn
, return Hello Glenn!
.
Useful links
Default types
String
Int
Float
Boolean
ID
Schema definition example
type Person { id: ID! # Not nullable name: String # Nullable age: Int weight: Float isOnline: Boolean posts: [Post!]! # Not nullable (but empty list is fine) } type Post { id: ID! slug: String! text: String! } type Query { allPersons: [Person!]! personById(id: ID!): Person allPosts: [Post!]! postBySlug(slug: String!): Post } type Mutation { createPost(message: String!): Post! }
Resolver function
(parent, args, context, info) => result;
allPosts
queryme
queryuser
querycreatePost
mutationdeletePost
mutationupdateUser
mutationUseful links
Query & mutation field:
- https://pothos-graphql.dev/docs/guide/queries-and-mutations
- https://pothos-graphql.dev/docs/api/schema-builder#queryfieldname-field
- https://pothos-graphql.dev/docs/api/schema-builder#mutationfieldname-field
Prisma
Make sure you're in the
server
directory:pnpm prisma migrate reset --skip-generate # Reset database pnpm prisma db push # Push prisma schema to database pnpm prisma generate # Generate Prisma client pnpm seed # Seed database with fake data
user-avatar.tsx
home-feed.tsx
profile-page.tsx
edit-profile.tsx
Use
useSuspenseQuery
from@apollo/experimental-nextjs-app-support/ssr
to fetch data on the server.
create-post-form.tsx
delete-post-dialog.tsx
edit-profile.tsx
Use
useMutation
from@apollo/client