SlideShare a Scribd company logo

How to GraphQL: React Apollo

What is Apollo? Integration with React GraphQL Developers https://selleo.com/graphql-expert-developers-team

1 of 16
Download to read offline
How to GraphQL: React Apollo
November 14, 2017
Tomasz Bąk
t.bak@selleo.com
About me
● software developer and architect, speaker, trainer
○ 12+ years of experience
○ 4+ years senior frontend developer
■ Ember, Angular, React
● co-founder of selleo.com
● http://selleo.com/people/tomasz-bak
How to GraphQL: React Apollo
Agenda
What is Apollo?
Integration with React
Workshops
What is Apollo?
Source: https://www.slideshare.net/reactconfbr/sashko-stubailo-the-graph-ql-and-apollo-stack-connecting-everything-together
Client-side tooling
● Apollo Client
● Dev tools
● apollo-codegen
● eslint-plugin-graphql
Server-side tooling
● Graphql-tools
○ Schema creation
○ Mocking
○ Stitching
● Apollo Server
● Apollo Optics
A set of projects designed to leverage GraphQL
What is Apollo Client?
Source: https://www.apollographql.com/client/
Community driven GraphQL client for JavaScript and native platforms
Bind GraphQL data to your UI with one function call.

Recommended

The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL StackSashko Stubailo
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Rafael Wilber Kerr
 
Getting started with Apollo Client and GraphQL
Getting started with Apollo Client and GraphQLGetting started with Apollo Client and GraphQL
Getting started with Apollo Client and GraphQLMorgan Dedmon
 
REST vs GraphQL
REST vs GraphQLREST vs GraphQL
REST vs GraphQLSquareboat
 
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Hafiz Ismail
 
An intro to GraphQL
An intro to GraphQLAn intro to GraphQL
An intro to GraphQLvaluebound
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQLTomasz Bak
 

More Related Content

What's hot

Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL Josh Price
 
Graphql presentation
Graphql presentationGraphql presentation
Graphql presentationVibhor Grover
 
GraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer toolsGraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer toolsSashko Stubailo
 
GraphQL vs REST
GraphQL vs RESTGraphQL vs REST
GraphQL vs RESTGreeceJS
 
Building Modern APIs with GraphQL
Building Modern APIs with GraphQLBuilding Modern APIs with GraphQL
Building Modern APIs with GraphQLAmazon Web Services
 
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...luisw19
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQLRodrigo Prates
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL IntroductionSerge Huber
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPAndrew Rota
 
Introduction to graphQL
Introduction to graphQLIntroduction to graphQL
Introduction to graphQLMuhilvarnan V
 
Training Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL LibraryTraining Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL LibraryNeo4j
 

What's hot (20)

Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
GraphQL
GraphQLGraphQL
GraphQL
 
Intro to GraphQL
 Intro to GraphQL Intro to GraphQL
Intro to GraphQL
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL
 
Graphql presentation
Graphql presentationGraphql presentation
Graphql presentation
 
GraphQL Fundamentals
GraphQL FundamentalsGraphQL Fundamentals
GraphQL Fundamentals
 
GraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer toolsGraphQL: Enabling a new generation of API developer tools
GraphQL: Enabling a new generation of API developer tools
 
GraphQL vs REST
GraphQL vs RESTGraphQL vs REST
GraphQL vs REST
 
Building Modern APIs with GraphQL
Building Modern APIs with GraphQLBuilding Modern APIs with GraphQL
Building Modern APIs with GraphQL
 
Graphql
GraphqlGraphql
Graphql
 
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL Introduction
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
 
GraphQL
GraphQLGraphQL
GraphQL
 
Introduction to graphQL
Introduction to graphQLIntroduction to graphQL
Introduction to graphQL
 
Training Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL LibraryTraining Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL Library
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 

Similar to How to GraphQL: React Apollo

Sashko Stubailo - The GraphQL and Apollo Stack: connecting everything together
Sashko Stubailo - The GraphQL and Apollo Stack: connecting everything togetherSashko Stubailo - The GraphQL and Apollo Stack: connecting everything together
Sashko Stubailo - The GraphQL and Apollo Stack: connecting everything togetherReact Conf Brasil
 
Modular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingModular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingSashko Stubailo
 
Beam + Pulsar: Powerful Stream Processing at Scale - Pulsar Summit SF 2022
Beam + Pulsar: Powerful Stream Processing at Scale - Pulsar Summit SF 2022Beam + Pulsar: Powerful Stream Processing at Scale - Pulsar Summit SF 2022
Beam + Pulsar: Powerful Stream Processing at Scale - Pulsar Summit SF 2022StreamNative
 
Elixir + GraphQL = Absinthe 2019.04.10
Elixir + GraphQL = Absinthe 2019.04.10Elixir + GraphQL = Absinthe 2019.04.10
Elixir + GraphQL = Absinthe 2019.04.10Alexander Knowles
 
Run your code serverlessly on Google's open cloud
Run your code serverlessly on Google's open cloudRun your code serverlessly on Google's open cloud
Run your code serverlessly on Google's open cloudwesley chun
 
How to use apolloJS on React ?
How to use apolloJS on React ?How to use apolloJS on React ?
How to use apolloJS on React ?Jonathan Jalouzot
 
GraphQL API Crafts presentation
GraphQL API Crafts presentationGraphQL API Crafts presentation
GraphQL API Crafts presentationSudheer J
 
Angular based enterprise level frontend architecture
Angular based enterprise level frontend architectureAngular based enterprise level frontend architecture
Angular based enterprise level frontend architectureHimanshu Tamrakar
 
Getting Productive & Performant with Angular
Getting Productive &  Performant with AngularGetting Productive &  Performant with Angular
Getting Productive & Performant with AngularVinci Rufus
 
DrupalCon Europe 2020 Low Code
DrupalCon Europe 2020 Low CodeDrupalCon Europe 2020 Low Code
DrupalCon Europe 2020 Low CodeAlejandro Moreno
 
GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0Tobias Meixner
 
Full Stack Graph in the Cloud
Full Stack Graph in the CloudFull Stack Graph in the Cloud
Full Stack Graph in the CloudNeo4j
 
Visual, scalable, and manageable data loading to and from Neo4j with Apache Hop
Visual, scalable, and manageable data loading to and from Neo4j with Apache Hop Visual, scalable, and manageable data loading to and from Neo4j with Apache Hop
Visual, scalable, and manageable data loading to and from Neo4j with Apache Hop Neo4j
 
Serverless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersServerless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersSashko Stubailo
 
Front-end for Java developers Devoxx France 2018
Front-end for Java developers Devoxx France 2018Front-end for Java developers Devoxx France 2018
Front-end for Java developers Devoxx France 2018Deepu K Sasidharan
 
The new features of angular 12
The new features of angular 12The new features of angular 12
The new features of angular 12Zobi Web Solutions
 
GraphQL Meetup Bangkok 4.0
GraphQL Meetup Bangkok 4.0GraphQL Meetup Bangkok 4.0
GraphQL Meetup Bangkok 4.0Tobias Meixner
 

Similar to How to GraphQL: React Apollo (20)

Sashko Stubailo - The GraphQL and Apollo Stack: connecting everything together
Sashko Stubailo - The GraphQL and Apollo Stack: connecting everything togetherSashko Stubailo - The GraphQL and Apollo Stack: connecting everything together
Sashko Stubailo - The GraphQL and Apollo Stack: connecting everything together
 
Modular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingModular GraphQL with Schema Stitching
Modular GraphQL with Schema Stitching
 
The GrapQL ecosystem
The GrapQL ecosystemThe GrapQL ecosystem
The GrapQL ecosystem
 
Beam + Pulsar: Powerful Stream Processing at Scale - Pulsar Summit SF 2022
Beam + Pulsar: Powerful Stream Processing at Scale - Pulsar Summit SF 2022Beam + Pulsar: Powerful Stream Processing at Scale - Pulsar Summit SF 2022
Beam + Pulsar: Powerful Stream Processing at Scale - Pulsar Summit SF 2022
 
Elixir + GraphQL = Absinthe 2019.04.10
Elixir + GraphQL = Absinthe 2019.04.10Elixir + GraphQL = Absinthe 2019.04.10
Elixir + GraphQL = Absinthe 2019.04.10
 
Run your code serverlessly on Google's open cloud
Run your code serverlessly on Google's open cloudRun your code serverlessly on Google's open cloud
Run your code serverlessly on Google's open cloud
 
How to use apolloJS on React ?
How to use apolloJS on React ?How to use apolloJS on React ?
How to use apolloJS on React ?
 
GraphQL API Crafts presentation
GraphQL API Crafts presentationGraphQL API Crafts presentation
GraphQL API Crafts presentation
 
Angular based enterprise level frontend architecture
Angular based enterprise level frontend architectureAngular based enterprise level frontend architecture
Angular based enterprise level frontend architecture
 
Getting Productive & Performant with Angular
Getting Productive &  Performant with AngularGetting Productive &  Performant with Angular
Getting Productive & Performant with Angular
 
DrupalCon Europe 2020 Low Code
DrupalCon Europe 2020 Low CodeDrupalCon Europe 2020 Low Code
DrupalCon Europe 2020 Low Code
 
GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0
 
Full Stack Graph in the Cloud
Full Stack Graph in the CloudFull Stack Graph in the Cloud
Full Stack Graph in the Cloud
 
Visual, scalable, and manageable data loading to and from Neo4j with Apache Hop
Visual, scalable, and manageable data loading to and from Neo4j with Apache Hop Visual, scalable, and manageable data loading to and from Neo4j with Apache Hop
Visual, scalable, and manageable data loading to and from Neo4j with Apache Hop
 
Serverless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersServerless GraphQL for Product Developers
Serverless GraphQL for Product Developers
 
Front-end for Java developers Devoxx France 2018
Front-end for Java developers Devoxx France 2018Front-end for Java developers Devoxx France 2018
Front-end for Java developers Devoxx France 2018
 
The new features of angular 12
The new features of angular 12The new features of angular 12
The new features of angular 12
 
Open data for good
Open data for goodOpen data for good
Open data for good
 
_Django meets GraphQL.pdf
_Django meets GraphQL.pdf_Django meets GraphQL.pdf
_Django meets GraphQL.pdf
 
GraphQL Meetup Bangkok 4.0
GraphQL Meetup Bangkok 4.0GraphQL Meetup Bangkok 4.0
GraphQL Meetup Bangkok 4.0
 

More from Tomasz Bak

Design Patterns in React
Design Patterns in ReactDesign Patterns in React
Design Patterns in ReactTomasz Bak
 
Building React CRUD app in minutes?
Building React CRUD app in minutes?Building React CRUD app in minutes?
Building React CRUD app in minutes?Tomasz Bak
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to ReactTomasz Bak
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypressTomasz Bak
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packagesTomasz Bak
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?Tomasz Bak
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2 Tomasz Bak
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Tomasz Bak
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript PromisesTomasz Bak
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpTomasz Bak
 
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSUlepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSTomasz Bak
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmailTomasz Bak
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005Tomasz Bak
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScriptTomasz Bak
 

More from Tomasz Bak (17)

Design Patterns in React
Design Patterns in ReactDesign Patterns in React
Design Patterns in React
 
Building React CRUD app in minutes?
Building React CRUD app in minutes?Building React CRUD app in minutes?
Building React CRUD app in minutes?
 
How to migrate large project from Angular to React
How to migrate large project from Angular to ReactHow to migrate large project from Angular to React
How to migrate large project from Angular to React
 
JAMstack
JAMstackJAMstack
JAMstack
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypress
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packages
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with Gulp
 
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSUlepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmail
 
Kerberos
KerberosKerberos
Kerberos
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005
 
Ldap novell
Ldap novellLdap novell
Ldap novell
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScript
 

Recently uploaded

No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!Anthony Dahanne
 
Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!alttaskcom
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash CourseRohan Chandane
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Jeffrey Haguewood
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowNaoki (Neo) SATO
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flinkconfluent
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleAmir Moghimi
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio, Inc.
 
What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?NYGGS Automation Suite
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsSprings
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfssuser82c38d
 
The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThousandEyes
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20Shane Coughlan
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfssuser82c38d
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureHironori Washizaki
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이ssuser82c38d
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019VICTOR MAESTRE RAMIREZ
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxMindInventory
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Dmitry Zinoviev
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCIOWomenMagazine
 

Recently uploaded (20)

No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!
 
Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash Course
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flow
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flink
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scale
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
 
What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?What are the Reasons for Tracking the Attendance of the Employees?
What are the Reasons for Tracking the Attendance of the Employees?
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and Cons
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdf
 
The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and Takeaways
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdf
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptx
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdf
 

How to GraphQL: React Apollo

  • 1. How to GraphQL: React Apollo November 14, 2017 Tomasz Bąk t.bak@selleo.com
  • 2. About me ● software developer and architect, speaker, trainer ○ 12+ years of experience ○ 4+ years senior frontend developer ■ Ember, Angular, React ● co-founder of selleo.com ● http://selleo.com/people/tomasz-bak
  • 4. Agenda What is Apollo? Integration with React Workshops
  • 5. What is Apollo? Source: https://www.slideshare.net/reactconfbr/sashko-stubailo-the-graph-ql-and-apollo-stack-connecting-everything-together Client-side tooling ● Apollo Client ● Dev tools ● apollo-codegen ● eslint-plugin-graphql Server-side tooling ● Graphql-tools ○ Schema creation ○ Mocking ○ Stitching ● Apollo Server ● Apollo Optics A set of projects designed to leverage GraphQL
  • 6. What is Apollo Client? Source: https://www.apollographql.com/client/ Community driven GraphQL client for JavaScript and native platforms Bind GraphQL data to your UI with one function call.
  • 7. Key concepts of the Apollo Client Source: https://www.apollographql.com/docs/react/index.html ● Incrementally adoptable ● Universally compatible ● Simple to get started with ● Inspectable and understandable ● Built for interactive apps ● Community driven
  • 8. Integration with React Source: https://www.apollographql.com/docs/react/index.html
  • 9. Write queries, not code Query
  • 10. Write queries, not code Component
  • 11. Write queries, not code View
  • 12. Write queries, not code Edit
  • 13. The benefits ● Eliminate frontend data boilerplate ● Pull complexity out of the client ● Improve performance ● Incrementally evolve your API ● Types and validation across the stack Source: https://www.apollographql.com/
  • 16. Workshops graphql-ruby (~908k total downloads) react-apollo (~267k downloads in the last month) ● Based on classic Northwind sample database ● Best Practices, TDD ● Signup, Signin ● Dashboard with charts ● CRUD, validations ● Nested objects ● Filtering and sorting listings