GraphQL with React: The Complete Developers Guide

Explore the fundamentals of restful routing, including http methods for creating, reading, updating, and deleting posts; examine nested resources and the problems restful conventions face as data grows.

Explore the shortcomings of restful routing with nested data, show why multiple http requests and overserving data arise, and see how GraphQL solves these challenges.

Explore how GraphQL overcomes restful routing limits by querying a graph of data to fetch nested relations, like users, friends, and their company names.

Build a GraphQL app with an express server and a user data model, test queries using the graphical tool, and wire up server.js on port 4000.

Mount GraphQL in an Express app with app.use('/graphql', GraphQL) and enable GraphiQI for development, then test locally at localhost:4000/graphql as you explore the schema.

Define and wire a GraphQL schema as the linchpin of your server, detailing users, companies, and positions, their properties and relationships, and ensure the Express GraphQL middleware receives a schema.

Define the GraphQL schema by creating a user type with id, first name, and age, using a GraphQL object type and GraphQL String and GraphQL int types.

Define root query as the entry point to GraphQL data, enabling fetch by user id and using a resolve function to return the user with id, first name, and age.

Implement a resolve function to return a user by id from a hard coded list using lodash, and wire a GraphQL schema with a root query in Node.

Explore the graphiql tool and docs panel to query a GraphQL schema, inspect root query types, fetch user data by id, and use autocomplete for fields.

Examine architectures to serve dynamic data for GraphQL apps, moving from hard-coded users to external data sources and using JSON Server to mock an API.

Fetch user data asynchronously in a GraphQL resolve by returning a promise. Call a Json server with axios to retrieve data by user id.

Hook up nodemon in GraphQL with React course to watch project files and auto restart the server when code changes, by running nodemon server.js through a dev script in package.json.

Define a company type and relate it to users by adding a companyId to user records, create sample Apple and Google data, and test relationships via json-server routes like /companies/1/users.

Define a company type in the GraphQL schema above the user type, with id, name, description as strings, and link it to users via a company field with resolve function.

Learn how GraphQL resolves a user’s associated company by implementing a resolve function to fetch the company from a JSON server using Axios.

Explore how GraphQL resolves queries using a root query and resolve functions, mapping reality land data (users and companies) into a graph with traversable edges.

Add a direct company field to the root query, accepting an id string. Implement the resolve function to fetch the company from the server and return its data.

Learn to implement bidirectional relations in GraphQL by enabling a company to return its associated users, updating the root query and schema, and validating with a json server lookup.

Add a bidirectional company-to-users relation in GraphQL by introducing a users list field, using GraphQL list of user type, and resolving via axios to fetch users by company id.

Resolve circular references in GraphQL by deferring the fields object with an arrow-function closure, allowing user and company types to reference each other and support nested queries.

Learn how to name and alias GraphQL queries, navigate root query fields, and use fragments to avoid repeating common fields like id, name, and description when querying companies.

Learn how GraphQL mutations modify data by creating, updating, and deleting records, and define a mutation type with fields to manipulate the users and companies collections.

Learn to build a GraphQL add user mutation with non-null first name and age, implement resolve via axios post to a json server, and update the schema.

Implement a delete user mutation on the GraphQL server using an id and axios delete to localhost:3000/users/{id}, handling null responses from the json server.

Edit a user with a GraphQL mutation, using patch requests to update only provided fields and return the updated user from the Json server.

Explore how to connect a GraphQL server to a React frontend using Apollo client, compare GraphQL clients like Loka and Relay, and assess tradeoffs for real-world apps.

Compare GraphQL Express and Apollo Server on the backend, detailing schema, types, and resolvers, and explain why GraphQL Express offers stability and co-located logic.

Focus on the front end with React and Apollo Client to build a real web application using GraphQL. Clone the starter project from GitHub and install dependencies with npm install.

Explore a starter pack for a full-stack GraphQL with React app, examining client and server code, a modular schema, and a MongoDB-backed song writing app with lyrics and upvotes.

Set up a new remote MongoDB database on MongoLab, obtain the connection URI, create a database user with read/write access, and connect your app to the URI.

Explore the GraphQL schema using the automatically generated docs panel, learn route queries and mutations, and practice creating a song and its lyrics with mutations.

Configure the Apollo client and provider in the React app, create the Apollo store, and wire them to the root component to enable GraphQL data flows.

Create a React song list component using Apollo Client and React Apollo to fetch data from a GraphQL server and set up the binding layer for lyrics and song creation.

Identify the song list data you need, fetch only the song titles via a GraphQL query written with gql and backticks, then bind the query to the component with Apollo.

Bond the GraphQL query to the React component and access the returned data via props.data (such as songs) after loading completes.

Explore how the GraphQL helper exposes a data object on props and reveals songs as this.props.data.songs, while guarding rendering with the loading flag and mapping songs to list items.

Fix React key warnings by updating the query to fetch song ids, using them as keys in the map, and switching to a semantic ul with materialize css classes.

Outline GraphQL architecture with React, focusing on the Apollo store and provider, centralized queries, and data flowing to presentational components; add a song create route via React Router.

Set up React Router in the app root with hash history and an Apollo provider, and render the song list at the root route while scaffolding a song create component.

This lecture shows creating a song creation page in a React app, using GraphQL mutations, a controlled form, and React Router navigation between the song list and create views.

Wire a form submit to a GraphQL add song mutation using onSubmit, preventDefault, and the gql helper in a React Apollo setup to update the backend with a new song.

Learn how to pass a song title from a React component into a GraphQL mutation using query variables, define those variables, and use the add song mutation to customize requests.

Defining query variables in React shows how to pass a title into a GraphQL add song mutation using a GraphQL helper. Use mutate with variables to trigger updates.

Implement a navigation workflow for songs by adding a big red create button and a back button, and redirect to the song list after mutation using React Router.

Explore how Apollo and React manage list data after mutations, uncovering why a song list may not auto-update and how to refetch queries to refresh the UI.

Learn to automatically refresh data after a mutation by using Apollo's refetchQueries, refactoring queries into a shared file, and ensuring the song list updates without duplicate requests.

Implement deletion by mutation in a React GraphQL app: add a delete button, wire an ID-based mutation to remove a song (and lyrics), and refetch the list.

Wire a delete song mutation into the song list component using two GraphQL helper invocations, and explain why only one mutation runs per call.

Wire a delete song mutation to the song list by adding a delete icon with an onClick handler, passing the song id, and refetching the list after mutation.

Learn to keep a React Apollo powered song list in sync after deletions by refetching the associated query, using this.props.data.refetch or refetchQueries, and understanding component query association.

Adjust the app's css to move the icon to the far right in every row using flexbox and space-between, import the style.css file, and apply a pointer cursor to icons.

Plan and implement the song detail page to display lyrics for a specific song, with a lyric list and lyric create, wired to a RESTful /songs/:id route.

Fetch a single song by id using a named GraphQL query with a query variable, and wire the result into the song detail component.

Wrap the song detail component with the GraphQL helper and pass the URL id as a query variable to fetch the current song data.

Fetch the selected song with GraphQL, display its title in the detail header, handle loading with a conditional render, and enable back button navigation from the list to details.

Enable intuitive navigation by adding a back button to the song list and turning song titles into links to detail pages using React Router's Link and ES6 template strings.

Build a lyric creation form as a controlled, class-based component on the song detail page, wired to a mutation that saves lyrics to a song.

Implement a lyric creation form in React, manage content state with onchange handler, prevent default submit, and execute an add lyric to song GraphQL mutation with Apollo.

Import gql helper, attach lyric creation mutation to the component, and use this.props.mutate with content and song id passed from the song detail; clear the input after submission.

Create and display a lyric list in a React app, with each lyric shown beside a like button, using a class-based LyricList component embedded in the song detail page.

Enhance the song detail query to fetch lyrics for a song, test in GraphiQL, and pass lyrics as props to the lyric list, showcasing retrieving related data in one query.

Learn how Apollo stores songs and lyrics, why mutations may not automatically update lists, and how assigning IDs to records enables reliable updates and rerenders.

Configure apollo client with data id from object to normalize data by id, enabling precise cache updates and efficient, single-request data synchronization.

Add a thumbs up icon to every lyric in the list and wire an on-click handler to call a GraphQL mutation with the lyric ID, updating the backend.