GraphQL is quickly becoming mainstream as one of the best ways to get data into your React application. When we see people modernize their app architecture and move to React, they often want to migrate their API to GraphQL as part of the same effort. But while React is super easy to adopt in a small part of your app at a time, GraphQL can seem like a much larger investment. In this talk, we’ll go over the fastest and most effective ways for React developers to incrementally migrate their existing APIs and backends to GraphQL, then talk about opportunities for improvement in the space. If you’re using React and are interested in GraphQL, but are looking for an extra push to get it up and running at your company, this is the talk for you!
GraphQL can be one of the best ways to make your product development more fun and productive. In this presentation I talk about how GraphQL makes your life simpler, and how to write and deploy a GraphQL API with Apollo Server 2.0 and serverless deployment via Netlify Functions.
GraphQL across the stack: How everything fits togetherSashko Stubailo
My talk from GraphQL Summit 2017!
In this talk, I talk about a future for GraphQL which builds on the idea that GraphQL enables lots of tools to work together seamlessly across the stack. I present this through the lens of 3 examples: Caching, performance tracing, and schema stitching.
Stay tuned for the video recording from GraphQL Summit!
In this talk, I go over some of the concerns people initially have when adding GraphQL to their existing frontends and backends, and cover some of the tools that can be used to address them.
What if you could create a GraphQL API by combining many smaller APIs? That's what we're aiming for with schema stitching, the new feature in the Apollo graphql-tools package.
GraphQL is a wonderful abstraction for describing and querying data. Apollo is an ambitious project to help you build apps with GraphQL. In this talk, we'll go over how all the parts—Client, Server, Dev Tools, Codegen, and more—create an end-to-end experience for building apps on top of any data.
## Detailed description
In today's development ecosystem, there are tons of options for almost every part of your application development process: UI rendering, styling, server side rendering, build systems, type checking, databases, frontend data management, and more. However, there's one part of the stack that hasn't gotten as much love in the last decade, because it usually falls in the cracks between frontend and backend developers: Data fetching.
The most common way to load data in apps today is to use a REST API on the server and manage the data manually on the client. Whether you're using Redux, MobX, or something else, you're usually doing everything yourself—deciding when to load data, how to keep it fresh, updating the store after sending updates to the server, and more. But if you're trying to develop the best user experience for your app, all of that gets in the way; you shouldn't have to become a systems engineer to create a great frontend. The Apollo project is based on the belief that data loading doesn't have to be complicated; instead, you should be able to easily get the data you want, when you want it, and it should be managed for you just like React manages updating your UI.
Because data loading touches both the frontend and backend of your app, GraphQL and Apollo have to include many parts to fulfill that promise of being able to seamlessly connect your data together. First, we need client libraries not only for React and JavaScript, but also for native iOS and Android. Then, we must bring server-side support for GraphQL queries, mutations, and most recently subscriptions to every server technology and make those servers easier to write. And finally, we want not only all of the tools that people are used to with REST APIs, but many more thanks to all of the capabilities enabled by GraphQL.
In this talk, we'll go over all of the parts of a GraphQL-oriented app architecture, and how different GraphQL and Apollo technologies come together to solve all of the parts of data loading and management for React developers.
There are a lot of tools and processes involved in modern front-end development: Component development, design, data fetching, testing, and more. At Stripe, our team have put a lot of effort into making these things work together in a way that's more than the sum of their parts.
Meteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern AppsSashko Stubailo
These are the slides for the talk Emily Stark and I presented at MIT on September 9, 2014.
We talked about the components that make up Meteor and how they fit together, finishing off with a more in-depth discussion of DDP, Meteor's Distributed Data Protocol.
GraphQL can be one of the best ways to make your product development more fun and productive. In this presentation I talk about how GraphQL makes your life simpler, and how to write and deploy a GraphQL API with Apollo Server 2.0 and serverless deployment via Netlify Functions.
GraphQL across the stack: How everything fits togetherSashko Stubailo
My talk from GraphQL Summit 2017!
In this talk, I talk about a future for GraphQL which builds on the idea that GraphQL enables lots of tools to work together seamlessly across the stack. I present this through the lens of 3 examples: Caching, performance tracing, and schema stitching.
Stay tuned for the video recording from GraphQL Summit!
In this talk, I go over some of the concerns people initially have when adding GraphQL to their existing frontends and backends, and cover some of the tools that can be used to address them.
What if you could create a GraphQL API by combining many smaller APIs? That's what we're aiming for with schema stitching, the new feature in the Apollo graphql-tools package.
GraphQL is a wonderful abstraction for describing and querying data. Apollo is an ambitious project to help you build apps with GraphQL. In this talk, we'll go over how all the parts—Client, Server, Dev Tools, Codegen, and more—create an end-to-end experience for building apps on top of any data.
## Detailed description
In today's development ecosystem, there are tons of options for almost every part of your application development process: UI rendering, styling, server side rendering, build systems, type checking, databases, frontend data management, and more. However, there's one part of the stack that hasn't gotten as much love in the last decade, because it usually falls in the cracks between frontend and backend developers: Data fetching.
The most common way to load data in apps today is to use a REST API on the server and manage the data manually on the client. Whether you're using Redux, MobX, or something else, you're usually doing everything yourself—deciding when to load data, how to keep it fresh, updating the store after sending updates to the server, and more. But if you're trying to develop the best user experience for your app, all of that gets in the way; you shouldn't have to become a systems engineer to create a great frontend. The Apollo project is based on the belief that data loading doesn't have to be complicated; instead, you should be able to easily get the data you want, when you want it, and it should be managed for you just like React manages updating your UI.
Because data loading touches both the frontend and backend of your app, GraphQL and Apollo have to include many parts to fulfill that promise of being able to seamlessly connect your data together. First, we need client libraries not only for React and JavaScript, but also for native iOS and Android. Then, we must bring server-side support for GraphQL queries, mutations, and most recently subscriptions to every server technology and make those servers easier to write. And finally, we want not only all of the tools that people are used to with REST APIs, but many more thanks to all of the capabilities enabled by GraphQL.
In this talk, we'll go over all of the parts of a GraphQL-oriented app architecture, and how different GraphQL and Apollo technologies come together to solve all of the parts of data loading and management for React developers.
There are a lot of tools and processes involved in modern front-end development: Component development, design, data fetching, testing, and more. At Stripe, our team have put a lot of effort into making these things work together in a way that's more than the sum of their parts.
Meteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern AppsSashko Stubailo
These are the slides for the talk Emily Stark and I presented at MIT on September 9, 2014.
We talked about the components that make up Meteor and how they fit together, finishing off with a more in-depth discussion of DDP, Meteor's Distributed Data Protocol.
GraphQL: The Missing Link Between Frontend and Backend DevsSashko Stubailo
Engineers working on backend data services are often focused on operational concerns like data consistency, reliability, uptime, and storage efficiency. Because each situation calls for a specific set of tradeoffs, one organization can end up with a diverse set of backend databases and services. For the people building the UI and frontend API layers, this diversity can quickly become an issue, especially if the same client needs to call into multiple backends or fetch related objects across different data sources.
GraphQL is a language-agnostic API gateway technology designed precisely to solve this mismatch between backend and frontend requirements. It provides a highly structured, yet flexible API layer that lets the client specify all of its data requirements in one GraphQL query, without needing to know about the backend services being accessed. Better yet, because of the structured, strongly typed nature of both GraphQL queries and APIs, it's possible to quickly get critical information, such as which objects and fields are accessed by which frontends, which clients will be affected by specific changes to the backend, and more.
In this talk, I'll explain what GraphQL is, what data management problems it can solve in an organization, and how you can try it today.
This presentation was part of an internal training session at Jahia to make people aware of GraphQL, and also shared the lessons learned while working with it. It is intended for audiences that have no prior knowledge of GraphQL.
This Slid shows the GraphQL Fundamentals, cover below points.
* what: what is GraphQL
* who: Who builds GraphQL
* why: Why we need GraphQL
* how: How to use GraphQL
IT also cover
* Application Programming Interface (API History Image )
* Principles of REST API Design
* REST Flow / GraphQL Flow diagram
* Rest Traditional Data fetching.
* REST vs GraphQL
* Browser Tools
* GraphQL Mutation
* GraphQL Variables
* GraphQL Fragments
* Pain Points of GraphQL
Overview of GraphQL
How it is different from REST
When you should consider using it and when you should not
Incremental demos until calling GraphQL from an React application: https://github.com/bary822/graphQL-techtalk
It is a basic presentation which can help you understand the basic concepts about Graphql and how it can be used to resolve the frontend integration of projects and help in reducing the data fetching time
This presentation also explains the core features of Graphql and why It is a great alternative for REST APIs along with the procedure with which we can integrate it into our projects
GraphQL: The Missing Link Between Frontend and Backend DevsSashko Stubailo
Engineers working on backend data services are often focused on operational concerns like data consistency, reliability, uptime, and storage efficiency. Because each situation calls for a specific set of tradeoffs, one organization can end up with a diverse set of backend databases and services. For the people building the UI and frontend API layers, this diversity can quickly become an issue, especially if the same client needs to call into multiple backends or fetch related objects across different data sources.
GraphQL is a language-agnostic API gateway technology designed precisely to solve this mismatch between backend and frontend requirements. It provides a highly structured, yet flexible API layer that lets the client specify all of its data requirements in one GraphQL query, without needing to know about the backend services being accessed. Better yet, because of the structured, strongly typed nature of both GraphQL queries and APIs, it's possible to quickly get critical information, such as which objects and fields are accessed by which frontends, which clients will be affected by specific changes to the backend, and more.
In this talk, I'll explain what GraphQL is, what data management problems it can solve in an organization, and how you can try it today.
This presentation was part of an internal training session at Jahia to make people aware of GraphQL, and also shared the lessons learned while working with it. It is intended for audiences that have no prior knowledge of GraphQL.
This Slid shows the GraphQL Fundamentals, cover below points.
* what: what is GraphQL
* who: Who builds GraphQL
* why: Why we need GraphQL
* how: How to use GraphQL
IT also cover
* Application Programming Interface (API History Image )
* Principles of REST API Design
* REST Flow / GraphQL Flow diagram
* Rest Traditional Data fetching.
* REST vs GraphQL
* Browser Tools
* GraphQL Mutation
* GraphQL Variables
* GraphQL Fragments
* Pain Points of GraphQL
Overview of GraphQL
How it is different from REST
When you should consider using it and when you should not
Incremental demos until calling GraphQL from an React application: https://github.com/bary822/graphQL-techtalk
It is a basic presentation which can help you understand the basic concepts about Graphql and how it can be used to resolve the frontend integration of projects and help in reducing the data fetching time
This presentation also explains the core features of Graphql and why It is a great alternative for REST APIs along with the procedure with which we can integrate it into our projects
Sashko Stubailo - The GraphQL and Apollo Stack: connecting everything togetherReact Conf Brasil
Apresentado na React Conf Brasil, em São Paulo, 7 de Outubro de 2017 #reactconfbr
I’ve been exploring the space of declarative developer tools and frameworks for over five years. Most recently, I was the founding member of the Apollo project at Meteor Development Group. My greatest passion is to make software development simpler, and enable more people to create software to bring good to the world.
https://medium.com/@stubailo
@stubailo
- Patrocínio: Pipefy, Globo.com, Meteor, Apollo, Taller, Fullcircle, Quanto, Udacity, Cubos, Segware, Entria
- Apoio: Concrete, Rung, LuizaLabs, Movile, Rivendel, GreenMile, STQ, Hi Platform
- Promoção: InfoQ, DevNaEstrada, CodamosClub, JS Ladies, NodeBR, Training Center, BrazilJS, Tableless, GeekHunter
- Afterparty: An English Thing
Michelle Garrett - Build the API you want to see in the world (with GraphQL) ...Codemotion
Have you ever used a third party API, and it didn't work the way you wanted? You don't have to live with it! I'll be sharing my experience transforming unruly JSON into the GraphQL API of my dreams. I'll speak about how GraphQL helped me get the data I wanted, and share some strategies for designing schema you'll love. By the end of this talk, you'll understand how GraphQL can improve the quality of your data, and your life.
Michelle Garrett - Build the API you want to see in the world (with GraphQL) ...Codemotion
Have you ever used a third party API, and it didn't work the way you wanted? You don't have to live with it! I'll be sharing my experience transforming unruly JSON into the GraphQL API of my dreams. I'll speak about how GraphQL helped me get the data I wanted, and share some strategies for designing schema you'll love. By the end of this talk, you'll understand how GraphQL can improve the quality of your data, and your life.
apidays LIVE Australia 2020 - Have your cake and eat it too: GraphQL? REST? W...apidays
apidays LIVE Australia 2020 - Building Business Ecosystems
Have your cake and eat it too: GraphQL? REST? Why not have both!
Roy Mor, Technical Lead at Sisense
Use apolloJs on React project. Explain how use query, mutations and directive with apolloJS. They are part for use local cache management with apollojs.
Scaling Your Team With GraphQL: Why Relationships MatterJoel Bowen
Have you used GraphQL yet? If you haven't, you're likely to encounter the technology soon. If you have, you might have questions about how to scale your team and what best practices large and small companies are following. What principles should I be following when developing a new GraphQL API? What tooling is available to help me be more productive and spend less time writing boilerplate code? How can many teams with many apps across one company share one graph?
GraphQL Conf 2019 just wrapped up in Berlin where I was fortunate to hear meet thoughtful leaders on these and other subjects related to GraphQL. So, whether you're brand new to GraphQL or have an active project using GraphQL, I'd like to share some of what I have learned so you can be productive with GraphQL and your teams - while keeping relationships at the center of our work.
apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...apidays
apidays LIVE Hong Kong 2021 - API Ecosystem & Data Interchange
August 25 & 26, 2021
GraphQL : Beyond APIs, graph your enterprise
Maxime Topolov, CEO of GraphQL Portal
Check out our API conferences @ https://www.apidays.global/
GraphQL - A query language to empower your API consumers (NDC Sydney 2017)Rob Crowley
The shift to microservices, cloud native and rich web apps have made it challenging to deliver compelling API experiences. REST, as specified in Roy Fielding’s seminal dissertation, has become the architectural pattern of choice for APIs and when applied correctly allows for clients and servers to evolve in a loosely coupled manner. There are areas however where REST can deliver less than ideal client experiences. Often many HTTP requests are required to render a single view.
While this may be a minor concern for a web app running on a WAN with low latency and high bandwidth, it can yield poor client experiences for mobile clients in particular. GraphQL is Facebook’s response to this challenge and it is quickly proving itself as an exciting alternative to RESTful APIs for a wide range of contexts. GraphQL is a query language that provides a clean and simple syntax for consumers to interrogate your APIs. These queries are strongly types, hierarchical and enable clients to retrieve only the data they need.
In this session, we will take a hands-on look at GraphQL and see how it can be used to build APIs that are a joy to use.
GraphQL with .NET Core Microservices.pdfKnoldus Inc.
In this Webinar, will talk on GraphQL with .NET, that provides a modern and flexible approach to building APIs. It empowers developers to create efficient and tailored APIs that meet the specific needs of their applications and clients.
apidays LIVE Paris - The Rise of GraphQL for database APIs by Karthic Raoapidays
apidays LIVE Paris - Responding to the New Normal with APIs for Business, People and Society
December 8, 9 & 10, 2020
The Rise of GraphQL for database APIs
Karthic Rao, Founder of Pixelbytestudio
Similar to GraphQL over REST at Reactathon 2018 (20)
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
3. What’s GraphQL?
1. Define a schema for your data 2. Write a query to get the data you need
It’s an API specification that is quickly replacing REST for how people
communicate between their backends and frontends.
4. What do APIs have to do with React?
It turns out, a lot of what’s complicated in today’s frontend
development involves dealing with APIs and state management.
5. GraphQL removes complexity from the frontend.
Reducers
Sagas
Optimistic UI
.then
.catch
fetch
Error handling
Polling
Retries
Offline
Normalization
Instead of manipulating data on the client, you get it in
just the shape that you need right away.
Action creators
6. Apollo Client: GraphQL state management for React
By enabling React developers to simplify their workflow, in the last 2 years Apollo Client has
become the second most popular React state management solution, after only Redux!
7. And GraphQL + React is only getting better
With new directions like client-side state management, and quick support for cutting-edge technology like
React Async, with Apollo Client GraphQL and React are a match made in heaven.
8. There’s only one issue left.
To get the most of all this, you need a
GraphQL API.
9. GraphQL is often presented as a big rewrite, but
you don’t have to do it that way.
To get the main benefits for product development velocity we talked
about above, you don’t need to rethink your architecture.
You can get GraphQL working in just a few hours, and something
running in production in days.
10. You’ve already got an API.
If you work with React and don’t use GraphQL, you
probably work with a REST API or similar.
You often aren’t able to jump in and make major
changes to the backend when you want.
Even if you could, rewriting all your hard-built
business logic probably isn’t a good idea.
So what’s the solution?
REST REST REST
Complexity
Your app
11. Put GraphQL over REST.
Put a GraphQL layer in between your existing REST
backends and your React app.
Get all of the benefits of a GraphQL architecture without
modifying your backends.
From the point of view of the REST API, the same calls
will be made as before.
But now, the frontend doesn’t have to format, filter, and
manage the data anymore. REST REST REST
GraphQL API
12. Same feature, better result, less work
GET /api/sandwich/bread
GET /api/sandwich/meat
GET /api/sandwich/toppings
With REST
Filter down data to what you want
Do waterfall requests for related data and
combine everything together yourself
With GraphQL
query {
sandwich {
bread { baguette }
meat { turkey }
toppings { avocado, tomato }
}
}
● Same REST API calls
● No roundtrips from the client
● No manual data reformatting and management
● Only get the fields you need - reduce bandwidth
usage and increase performance
A case study with sandwiches.
14. GraphQL is changing
the game.
We talk to companies using GraphQL in
production every day, and some teams
tell us they can ship features fully
twice as fast as before.
That more than makes up for the effort of
getting that new API up and running.
Without
GraphQL
With
GraphQL
Existence of
GraphQL
Development
Velocity
2x
1x
15. OK, so where do I start?
Answer: With the schema.
16. Describe the API you
wish you had.
Design it based on the needs of your UI, but
try to make it general purpose enough to
evolve.
We’ve found that teams are most successful
when the GraphQL API is designed primarily
by the frontend developers that will use it.
Upcoming events
Justin Timberlake
@jtimberlake
Beyoncé
@beyonce
Man of the Woods tour
April 29, 2018
Man of the Woods tour
June 14, 2018
Man of the Woods tour
July 30, 2018
17. Coming up with part of our schema
Upcoming events
Justin Timberlake
@jtimberlake
Beyoncé
@beyonce
Man of the Woods tour
April 29, 2018
Man of the Woods tour
June 14, 2018
Man of the Woods tour
July 30, 2018
18. Using graphql-tools to
implement the schema
github.com/apollographql/graphql-tools
graphql-tools makes it easy to create a
production-ready GraphQL schema using the
schema language.
Nostalgia: It’s one of the first libraries we’ve
ever published and today most GraphQL
servers use it!
20. Some GraphQL schema design tips
Use field parameters for different
versions of the same field,
something you can’t easily do with
REST!
For ultimate future-proofing, use
globally unique IDs to avoid
depending on a specific backend.
Stick to simple fields over general
purpose fields that take complex
queries. This makes your API
easier to test and refactor.
posts(
searchQuery: String
sort: SortOptions
authorId: String
tags: [String]
)
searchPosts(
query: String
)
query {
post(id: “asdf”) {
title
postedAt(
format: “mm/dd/yyyy”
)
}
}
# Don’t use SQL ids directly
post(id: 5)
# Have an abstracted ID
post(
id: “1224845c-4582”
)
22. It’s just like filling in the blanks.
GraphQL API
types and
fields
REST API
endpoints
23. Every GraphQL schema
field is a function.
You can think of a GraphQL schema as a web of tiny
endpoints, and a query is a way of calling a bunch of
them in one request.
The function that implements a field is called a
resolver, and it can do basically anything.
Resolvers give GraphQL the flexibility of being a
general-purpose API layer.
24. Your GraphQL resolvers can
call your REST backend.
We can take the REST data fetches from the
client, and move them into the server.
This organizes all our REST API calls in one
place, removing data management
complexity from the client.
26. Let’s finish it up.
Let’s take a partially implemented
schema, and add a resolver to call
one more endpoint.
Now, with a single GraphQL
query, we can retrieve data that
used to take two endpoint fetches
in a single request.
29. Tips when wrapping a REST API with GraphQL
If your REST API has permissions,
just pass through your header
from the GraphQL request to the
underlying REST API.
The performance bar is that your
new GraphQL API doesn’t make
more REST calls than the
equivalent view did in React.
When you’re starting, build just
enough data for one view of your
app with one query.
DB REST API
REST API
31. What do we need from our
production GraphQL?
Deploy and run just like any Node server. Tip: we found
many teams already have this for server-side rendering.
Performance monitoring is important to make sure UI
doesn’t slow over time.
Dataloader per-request caching will help reduce load on
your REST backend.
GraphQL result caching for commonly viewed data can
make some queries nearly instant.
REST REST REST
GraphQL API
32. Deployment
You can run a GraphQL server anywhere
you can run Node, for example Heroku,
or Zeit Now.
If you’re talking to your REST backends
from the GraphQL API, you probably
want to run the new API in the same
region for faster roundtrips.
Check out the article on the Apollo Blog.
33. Monitoring GraphQL
Since current APM tools are often built around endpoints,
you’ll need to put in a little extra effort to identify the
performance of different chunks of data.
We recommend using meaningful query and mutation names,
and organizing your stats using those.
Apollo Engine is a tool/service we provide that sets this up for
you, and lets you browse data in a GraphQL-specific way.
apollographql.com/engine
34. Dataloader
For cases where a single query would request the same resource multiple times, Dataloader can help you
collapse them into one request by identifying the duplicates during execution.
github.com/facebook/dataloader
35. GraphQL result caching
Just like with REST API calls, you can cache the entire
GraphQL result on a TTL, based on the query.
There are a lot of ways you can set it up, but with the
Apollo cacheControl extension and Apollo Engine, you
can specify the cache expiration right in the schema.
36. TL;DR tips for GraphQL over REST
1. Design the GraphQL schema you want based on frontend needs
2. Fill in your schema with data from your existing REST endpoints
3. Optimize until you have the same number of fetches you used to do
from the frontend
Above all, do it fast, since it could make a huge difference in how long it
takes to iterate on features.
37. GraphQL over REST.
Sashko Stubailo, @stubailo
Open Source Lead, Apollo
apollographql.com
@apollographql
<Query query={GET_TODOS}>
{({ loading, error, data }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return data.todos.map(({ id, type }) => (
<p key={id}>{type}</p>
));
}}
</Query>
Breaking news
The new React API for Apollo Client shipped
today, with the new Query component!
dev-blog.apollodata.com