Coder Social home page Coder Social logo

glennreyes / react-graphql-workshop Goto Github PK

View Code? Open in Web Editor NEW
25.0 2.0 14.0 964 KB

A modern React & GraphQL setup with step-by-step lessons made for a full day pre-conference workshop

Home Page: https://react-graphql-workshop.vercel.app

License: MIT License

JavaScript 4.13% CSS 2.23% TypeScript 93.64%
react graphql workshop

react-graphql-workshop's Introduction

GraphQL for React developers

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.

  • ๐ŸŒฑ Learn GraphQL basics
  • ๐Ÿฅ‘ Build GraphQL queries & mutations
  • ๐Ÿฅ Get familiar with the GraphQL client
  • ๐Ÿ‡ Implement queries & mutations on the client
  • ๐Ÿ”‘ Access control & authorization
  • ๐ŸŽ› Production deployment

๐Ÿ”ง Setup

  1. Get started by cloning this repo and installing the dependencies:
git clone https://github.com/glennreyes/react-graphql-workshop.git
cd react-graphql-workshop
pnpm install
  1. Start the development servers:
pnpm dev
  1. Open GraphiQL at http://localhost:4000/graphql and the React app at http://localhost:3000.

๐Ÿ“š Exercises

Learn GraphQL basics

  • GraphiQL
  • Schema
  • Types
  • Resolvers

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;

Build GraphQL queries & mutations

Build queries

  1. ๐Ÿ’Ž Implement allPosts query
  2. ๐Ÿ’Ž Implement me query
  3. ๐Ÿ’Ž Implement user query

Build mutations

  1. ๐Ÿ’Ž Implement createPost mutation
  2. ๐Ÿ’Ž Implement deletePost mutation
  3. ๐Ÿ’Ž Implement updateUser mutation

Useful links

Query & mutation 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

Get familiar with the GraphQL client

Implement queries & mutations on the client

Queries

  1. Implement query in user-avatar.tsx
  2. Implement query in home-feed.tsx
  3. Implement queries in profile-page.tsx
  4. Implement query in edit-profile.tsx

Use useSuspenseQuery from @apollo/experimental-nextjs-app-support/ssr to fetch data on the server.

Mutations

  1. Implement mutation in create-post-form.tsx
  2. Implement mutation in delete-post-dialog.tsx
  3. Implement mutation in edit-profile.tsx

Use useMutation from @apollo/client

react-graphql-workshop's People

Contributors

dependabot[bot] avatar glennreyes avatar renovate-bot avatar toniiltanen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.