3^rd Practical Class:
Real Code!

App Setup

GraphQL

• http://dev.backend.USERNAME.vse.handson.pro/graphql
• More info about GraphQL at graphql.org

Query

JSON Response

Other Query

Other JSON Response

Initial Version of src/pages/Practical03.js

Modify src/Routes.js

• add import:
• add Practical03 to PRACTICALS array:

useQuery Hook

• Getting started - useQuery
• useQuery API Docs

Use Snippet to Display Quack

Final Structure

• create atom QuackText
• create atom SelectableQuackWrapper
• create molecule SelectableQuack
• create template Practical03Template

Auto Reload: setTimeout

• setTimeout documentation
• clearTimeout documentation

Auto Reload

• use useEffect and setTimeout to reload data using quacksState.refetch()