GraphQL & Flutter - Build GraphQL APIs & Flutter Client Apps

Explore how REST APIs work with endpoints and HTTP requests, then see how GraphQL streamlines data fetching by using a single query to return exact fields.

Explore how Facebook created GraphQL to solve data delivery challenges as apps grew, delivering a simple, robust data querying language that abstracts REST for client-side data.

Explore graph theory foundations and how graphs model data with nodes and edges, including directed and undirected graphs. See how GraphQL enables one-call queries over related data via Apollo.

Explore a simple GraphQL API demo that demonstrates querying a schema with books and authors, using a front end tool to fetch specific fields and compare with REST.

Install and configure essential tools for a GraphQL server project, including commander for a cross‑platform terminal, Node.js, and Visual Studio Code, to start building your GraphQL API.

Install and configure your editor, using Visual Studio Code with essential GraphQL extensions. Learn shortcuts and IntelliSense to start building your first GraphQL server project.

Create the GraphQL project folder, initialize npm to generate package.json, and set up a server directory; install Express to build a Node.js server.

Create a server file app.js, import express, instantiate the app, and listen on port 4000 with a callback that logs readiness; run with node to serve requests.

Install graphql and express-graphql, set up an express app with a /graphql endpoint and GraphiQL, then run localhost:4000 to test with a schema.

Create and understand a GraphQL schema by defining types like user, sibling, and hobby, establishing their relationships, and outlining root queries to shape data from the endpoint.

Define a GraphQL schema with a root query and a user type, specify fields like id, name, and age, and learn to resolve queries in GraphiQL.

Learn how to implement a GraphQL resolve method that returns user data by id using a dummy data array, Lodash's find, and npm install lodash.

Extend a GraphQL schema by adding a profession field to users and a hobby type with a root query to fetch by id, while updating dummy data.

Explore how to connect user, hobby, and post types with one-to-many relationships in a GraphQL schema by adding list fields and user IDs to enable linked queries.

Learn to model one-to-many relationships by adding a user ID to posts, resolve related user data, and query post and user fields together in GraphQL with practical examples.

Explore how to relate users and hobbies in GraphQL by adding user IDs to hobbies, resolving user data within hobby queries, and fetching nested user fields in a single request.

Extend the user type with a posts field using GraphQL list, and implement a resolver to fetch a user’s posts by id, illustrating a graph model with posts and comments.

Learn how to add a hobbies field to a GraphQL query, returning a hobbies list with description and title, and resolving via user id to fetch posts and comments.

Introduce GraphQL mutations to modify data, complementing queries to fetch data and create a complete back-end workflow, in effect echoing how REST APIs handle changes.

Explore implementing GraphQL mutations by adding a create user mutation with name, age, and profession, including resolve logic and returning the new user; extend to create post.

Learn to create a post mutation in GraphQL, including defining post type and user ID relationships. See how mutations return related user data through cascading queries.

Create a hobby mutation in GraphQL by passing title, description, and user id, test via the GraphQL ide, and explore root queries and mutations with related user data.

Extend your GraphQL queries to fetch all users, hobbies, and posts by adding plural fields and list types, and return all items without arguments.

Define GraphQL types for hobbies and posts as lists, implement resolve functions to return hobby and post data, including nested user fields and comments, and test via a root query.

Explore GraphQL scalar types by defining a person object with ID, name, age, is married, and GPA using string, int, float, boolean, and ID. Import GraphQL and configure object fields.

Learn how to enforce non null fields in GraphQL by wrapping a type in non-null, using exclamation marks to prevent null values for fields like name, age, and GPA.

Define and query fields on object and scalar types using a resolver to return a person object with name, age, married, and GPA, and validate the GraphQL schema.

Compare relational databases and MongoDB, showing how collections of documents and JSON enable flexible data models without joins.

Create a MongoDB Atlas account, set up a new project and a free-tier shared cluster, whitelist your IP, create a database user, and copy the connection details.

Connect to a MongoDB database by configuring a json environment file with database name, username, and password; install mongoose and wire it into a node express server on port 4000.

Create mongoose models to store data in MongoDB by defining user schemas with name, age, and profession, exporting models, and applying this approach to hobby and post schemas.

Create hobby and post models using mongoose schemas, defining title, description, and comment fields, exporting mongoose models and setting a reference, preparing to save a user to the backend database.

Learn how to save a user to the backend database using a mongoose model within a GraphQL mutation, wiring the user schema, and persisting to return the generated id.

Create a hobby by passing a user ID and a hobby model, then save it via a mongoose model in the backend, returning the hobby ID.

Learn how to fetch a user and traverse to their posts and hobbies using GraphQL queries, filtering by user id and returning related post and hobby data.

Explore cors (cross-origin resource sharing) to whitelist requests from specific origins and enforce non-null required fields in GraphQL mutations by wrapping types and validating inputs.

Finish adding not-null constraints to fields in GraphQL mutations for user, post, and hobby, ensuring required fields like user id, comment, title, and description are not null.

Learn to implement the update user mutation in a GraphQL and MongoDB workflow by using find by id and update with $set, returning the updated document.

Learn how to update a post in GraphQL by crafting a clear update post mutation, passing the post ID and new comment, adjusting relationships, and returning the updated post.

Learn to update a hobby using a GraphQL mutation, including id and title, and see how mutations are organized inside the mutation schema as part of CRUD.

Implement a GraphQL remove user mutation by requiring a non-null id, removing the user with find by ID and remove, executing the operation, handling errors, and returning the removed user.

Learn how to remove a post and a hobby with GraphQL mutations, using id and type arguments, resolve logic, and error handling to complete the delete step in CRUD.

Learn how to publish a locally built GraphQL API to a remote server, so others can access the endpoint via a shareable link and use the API beyond localhost.

Deploy a GraphQL API to a Heroku remote server, configure MongoDB Atlas credentials as config vars, and push updates via git to run and test the endpoint.

Explore GraphQL playground tools to query, mutate, and inspect schemas and documents against your GraphQL API. Share links, test endpoints, and download schemas for use in other projects.

Transition to the client side by building a Flutter app that consumes the GraphQL API hosted on Heroku, enabling read, update, and delete operations.

Demonstrate a flutter client app that runs on iOS and Android, connected to a MongoDB backend, creating users with posts and hobbies, and performing cascading deletes to remove related data.

Create a flutter client inside the GraphQL project using VS Code, add the flutter, error lens, and pubspec assist extensions, then run and debug on iOS or Android.

Learn to set up the GraphQL Flutter dependency in a Flutter project, configure Hive storage and an HTTP link, and initialize a GraphQL client with a ValueNotifier.

Wrap your Flutter app with a GraphQL provider and a cache provider, pass the GraphQL client to the app, and refactor the home screen for a cohesive GraphQL Flutter workflow.

Restructure home screen by styling the title 'users and hobbies', set a transparent background and zero elevation, and wire navigation to add user and users pages via material page route.

Builds a dynamic list view with a list builder, item count, and card styling, then plans to populate it with user data from the database.

Learn to fetch and display users from a remote GraphQL API in flutter by wrapping the list in a query widget and parsing the results.

Add a clause to handle empty users by using an if statement in the users list view; show a centered no items found message when the database has no users.

Learn how to show additional user fields in a Flutter listview, using default values for missing occupation or age, and adjust layout with padding and column arrangement.

Add edit and delete buttons to a user card in a Flutter user interface, wire tap handlers and icons, and outline future functionality to edit or delete the selected user.