Build Dynamic Applications with GraphQL

This video gives an overview of the entire course.

In this video, we will create a web application, the communication via REST is not optimal. GraphQL is a modern approach without some limitations REST has.

• Quick look into REST API of Trello and problems

• Discover GraphQL fundamentals

• See advantages of GraphQL

In this video, we will learn how the Graph cool will provides a cloud service for a full featured hosted managed database with graphql interface.

• Discover features of provided service

• Create account and login

• Create our project

In this video, we will Start from the scratch and set up a GraphQL schema.

• Add Types to Schema: Board, List, Card type

• Add relations between Types

• Add sample data into the database

In this video, we will learn, how to work with GraphQL operations, the built–inplayground could be used.

• Query for boards, lists, details

• Modify data with running mutations

• Checkout built–in documentation explorer

In this video, to get our own server with our own GraphQL schema we can use cloud-based service “apollo–launchpad”.

• Discover Apollo–launchpad and create a new pad

• Add the schema of our board and run some GraphQL queries inbuilt–in GraphiQL

• Learn about GraphQL and implement resolvers

In this video, instead of working with real data, we do rapid prototyping with fake data.

• Activate auto–mocking with simple defaults values

• Customize the generated fake data

In this video, we will learn how GraphQL service can load data from many different sources. We can access other REST services for the Board data.

• Send REST calls to api.trello.com via node-fetch library

• Extend resolvers for fetching board/ lists/card and run queries

• Fetch the public data of a specific trellomember

In this video, to implement a GraphQL server we need to integrate our existing schema into a express.js server, for serving the http responses. There exist different libraries for that job. For better understanding, we will check them out and compare their features and how easy they can be used.

• Run our server based on apollo-server-express

• Run our server based on express-graphql

• Run our server based on graphql-yoga

In this video, we will understand how while using the data from Trello per REST calls it still has the disadvantages of REST. We create server to get our own local full-feature realtimeGraphQL database.

• Discover graphcool/ prisma: its architecture and its tooling

• Setup the data model for running the local server

• Start and run the server

In this video, we will learn how to bootstrap our React project for the Board web application.

• Download and install node.js runtime

• Create basic project structure with create-react-app

• Open IDE/editor, configure coding style and linting

In this video, we will learn how to create the main building blocks for the web page, for the Component hierarchy.

• Make a Board the new main application page

• Create a List and Card component, add to the board

• Separate state/data from our components

In this video, we will learn how to wrap our main application Component with Apollo client library. For simplicity we will use the mocked schema with fake data. Then add and run the GraphQL query.

• Discover the neededparts of Apollo client library

• Add the Apollo client with mocked schema link

• Define and add theGraphQL query to fill the Board with data

In this video, we will learn how each UI component represent a specific type of our GraphQL schema. Fragments help to separate these parts in a GraphQL query.

• Introduce the “fragment concept” per GraphiQL/playground

• Split the GraphQL query into fragments for each UI component

• Separate/move the fragments to their UI components

In this video, we will learn how to connect to any GraphQL server we adapt the linking of the Apollo client configuration. Additionally, let’s add query variables.

• Use the endpoint URL from the GraphQL-playground, add Apollo-link-http

• Adapt the GraphQL wrapping of our Board component with variable component

• Select a specific Board by id

Until now we only showed staticData. In this video we will learn how to modify data we need toadapt some current and add extraelements to input texts and toTrigger actions.

• Add semanticlibrary, improve CSSstyling to enable fullscreen and scrolling oflong task lists

• Add button for a‘new list’ at end oflists

• Add button for a‘new card’ at end ofeach list

We already know GraphQLmutations, In this video we will learn how we canintegrate calling them into the UIclient powered by Apollo.

• Checkout basicmutations and how toembed with Apollo

• Design mutationwith parameters inour playground

• Customize forembedding as propsinto our Reactcomponents

Apollo client has a powerful clientside cache and can update theReact UI automatically, In this video we will learn howcan that be triggered andControlled.Find out how to have an optimisticUI.

• Discover options fortrigger anyupdate query

• Find out how anoptimistic UI can beimplemented to cutturnaround times

In this video, we will learn for editing the cards, we will havea modal dialog, which will havenew UI logic, and send its changesto the GraphQL server on closing.

• Implement editablecards, make editor UI

• Send update toserver

• Update UI on serverresponse, + errordialog

In this video, we will learn for a kanban board we need to beAble to move cards. We need toadd this to the UI and trigger theright mutations on the server.

• Add reactant libraryand adapt the UI,prepare

• Implementcan drop check

• Trigger the mutationfor adding/removingthe Card

GraphQL specification containssubscriptions.In this video we will learn how to use them. Ourprisma server has it enabledout-of-the-box, so we can try them out.

• Open the serverplayground anddiscoversubscriptions inthe SchemaExplorer

• Analyze asubscription forCards and Lists

• Checkout the notification persubscription after Editing aCard

In this video, we will learn that Apollo Link needs to be configured toallow http and websockets connection.

• Add Apollolibraries forws-connection

• Configure ws link

• Switching between both links

In this video, we will learn that When the Board has beenchanged/edited, we want to get itinstantly updated in any anotherbrowser session.

• Add aBoard-change-subscription

• Connectsubscription toreact component

• Discover changes in Apollocache

In this video, we will learn when a Card or a List has been added,then its container needs to be updated. Also when moving a card, how cananother client be updated?

• Add aList-subscriptionfor adding cardsor moving Cards

• Add Cardsubscription forEditing a card

• Adapt delete-all-lists mutation

In this video, we will learn what happens when a Card has beenedited simultaneously in differentclients. Who wins? How can we avoidlosing entered data? Can we givefeedback to a user while editing a Card?We need to check offline/orasynchronous changes on client/server.

• Add aversion-field toour Card fortrackingconcurrentchanges

• Add indicator foredited Card intoedit-dialog

• Add checks and handling ofconflicts whensaving the edited Cardconcurrently

Access to our GraphQL server needs limitation, currently everybody can change anything. In this video we will add a dedicated GraphQL server with only the mutations and queries we need. For user account Mgmt we can use our DB to hold the login/passwords.

• We create a newprisma advancedproject with fullfeatured server

• Discovering thenew project, itsparts andstructure

• Merge our existingdata model andproject database withnew one

In this video, we will learn how besides a login/logoff form on the clientside, we need User management on theserver, where users accounts withpasswords are stored. We will use thesame DB.

• Add forms forlogin/ sign-in andadd routing to thispages

• Add a navbarshowing thelogged-in user

• Manage auth token on client and in server communication

Lets take a look at how the start page will contain the list of auser’s boards.Then he can select and open a specificboard.A user needs to create a board also.

• Add board relationto user-data modeland server side,add mutation tocreate a new board

• Replace startpage withlist-of-boards,add route andpage for specificboard

• Enable all neededmutations to securedserver forauthenticated user

In this video, we will see how each collaboration platform stores and shows who did any change on the board.After authentication we always know whois logged-in and can track that information.

• Extend graphqldata-model

• Store the user oneach change

• Extend the UI to showthe avatar of the lastauthor

In this video, we will learn how while developing, we should findand fix bugs quickly. Therefore weneed to get some insights.Error handling is essential andshould always give us full controland fast feedback.Graphql Error handling…Server error -> Client side.

• Explore the tools and practices

• Need to have debug logs or even debug our server

• Add more feedback tothe user on errors,improved errormessage handling

In this video, we understand how does it always make sense, to loadthe whole board at the beginning?What are the advantages ofsplitting the queries into smallerrequests.

• Add queryfor list-of-boards on theserver

• Split coolboard component to only hold the ids of thelists

• Adapt other parts,final discussion