Graphql presentation
3 likes4,193 views
GraphQL is a query language and server-side runtime that allows clients to request only the data they need from a single endpoint, contrasting with REST APIs that use multiple endpoints and often return unnecessary information. Developed by Facebook and publicly launched in 2015, GraphQL features its own type system for defining schemas and supports complex data representations, reducing network calls significantly. Applications can utilize GraphQL clients like Apollo and Relay for efficient data handling and integration with React.
Graphql presentation
- 1. Vibhor Grover DIVING INTO GRAPHQL ALONG WITH REACT &
- 2. WHAT IS GRAPHQL ? GraphQL is the new frontier in APIs (Application Programming Interfaces) design, and in how we build and consume them. It’s a query language, and a set of server-side runtimes (implemented in various backend languages) for executing queries. It’s not tied to a specific technology, but you can implement it in any language. It is a methodology that directly competes with REST (REpresentational State Transfer) APIs, much like REST competed with SOAP at first. GraphQL was developed at Facebook, like many of the technologies that are shaking the JavaScript world lately, like React and React Native, and it was publicly launched in 2015 - although Facebook used it internally for a few years before.
- 3. GRAPHQL - CORE PRINCIPLE • GraphQL exposes a single endpoint. • You send a query to that endpoint by using a special Query Language syntax. That query is just a string. • The server responds to a query by providing a JSON object. • The Schema Definition Language (SDL) • GraphQL has its own type system that’s used to define the schema of an API. The syntax for writing schemas is called Schema Definition Language (SDL). • Here is an example how we can use the SDL to define a simple type called Person • This type has two fields, they’re called name and age and are respectively of type String and Int. The ! following the type means that this field is required.
- 4. CONTINUED.. Example of a query based on schema definition language The allPersons field in this query is called the root field of the query. Everything that follows the root field, is called the payload of the query. The only field that’s specified in this query’s payload is name. This query would return a list of all persons currently stored in the database. Here’s an example response:
- 5. WHY GRAPHQL ? (WHEN WE ALREADY HAVE REST) •While REST is built on top of an existing architecture, which in the most common scenarios is HTTP, GraphQL on the other hand is building its own set of conventions. Which can be an advantage point or not, since REST benefits for free by caching on the HTTP layer. A single endpoint GraphQL has only one endpoint, where you send all your queries. With a REST approach, you create multiple endpoints and use HTTP verbs to distinguish read actions (GET) and write actions (POST, PUT, DELETE). GraphQL does not use HTTP verbs to determine the request type. Tailored to your needs With REST, you generally cannot choose what the server returns back to you, unless you have an API maintainer, otherwise, The API will usually return you much more information than what you need, unless you control the API server as well, and you tailor your responses for each different request.
- 6. Access nested data resources GraphQL allows to generate a lot less network calls. Let’s do an example: you need to access the names of the friends of a person. If your REST API exposes a /person endpoint, which returns a person object with a list of friends, you generally first get the person information by doing GET /person/1 which contains a list of ID of its friends. Unless the list of friends of a person already contains the friend name, with 100 friends you’d need to do 101 HTTP requests to the /person endpoint, which is a huge time cost, and also a resource intensive operation. With GraphQL, you need only one request, which asks for the names of the friends of a person. CONTINUED..
- 7. WHICH ONE IS BETTER ..? • GraphQL is a perfect fit when you need to expose complex data representations, and when clients might need only a subset of the data, or they regularly perform nested queries to get the data they need. • As with programming languages, there is no single winner, it all depends on your needs
- 8. TEXT THE BIG PICTURE (ARCHITECTURE) A standard greenfield architecture with one GraphQL Server that connects to a single database. Client GraphQl Server Database
- 9. QUERIES.. ▸It is a way of fetching data at the client side from the graphQl server by specifying the fields in the query to fetch the specific data.
- 10. MUTATIONS.. • GraphQL mutations are types of GraphQL queries that may result in the state of your backend "mutating" or changing, just like typical 'POST', 'PUT', 'PATCH', 'DELETE' APIs.
- 11. SUBSCRIPTIONS • Subscriptions are like GraphQL queries but instead of returning data in one read, you get data pushed from the server. • This is useful for your app to subscribe to "events" or "live results" from the backend, but while allowing you to control the "shape" of the event from your app. • subscriptions are great because they allow you to build great experiences without having to deal with websocket code!
- 12. HOW DOES SUBSCRIPTIONS WORK ..? • GraphQL queries and mutations are strings sent to a POST endpoint. What is a GraphQL subscription? That can't happen over a POST endpoint, because a simple HTTP endpoint would just return the response and the connection would close. • A GraphQL subscription is a subscription query string sent to a websocket endpoint. And whenever data changes on the backend, new data is pushed over websockets from the server to the client.
- 13. WHAT IS GRAPHQL - CLIENT ? consider some “infrastructure” features that you probably want to have in your app: • directly sending queries and mutations without constructing HTTP requests • view-layer integration • caching • validating and optimizing queries based on the schema But GraphQL provides the ability to abstract away a lot of the manual work you’d usually have to do during that process and lets you focus on the real important parts of your app!
- 14. CONTINUED.. There are two major GraphQL clients available at the moment. •The first one is Apollo Client, which is a community-driven effort to build a powerful and flexible GraphQL client for all major development platforms. •The second one is called Relay and it is Facebook’s homegrown GraphQL client that heavily optimizes for performance and is only available on the web. A major benefit of GraphQL is that it allows you to fetch and update data in a declarative manner. Put differently, we climb up one step higher on the API abstraction ladder and don’t have to deal with low- level networking tasks ourselves anymore. When you previously used plain HTTP (like fetch in Javascript or NSURLSession on iOS) to load data from an API, all you need to do with GraphQL is write a query where you declare your data requirements and let the system take care of sending the request and handling the response for you. This is precisely what a GraphQL client will do.
- 15. WHAT IS REACT - GRAPHQL - APOLLO - CLIENT• React renders, updates, and destroys components of the user interface • Apollo defines the ways we fetch and send data and provides interfaces to store it • GraphQL is the query language for fetching and updating our data • To be precise, you should use a GraphQL client for tasks that are repetitive and agnostic to the app you’re building. For example, being able to send queries and mutations without having to worry about lower-level networking details or maintaining a local cache. This is what GraphQ-Apollo-Client is created for.
- 16. GRAPHQL-APOLLO-CLIENT OVERVIEW Here’s an overview of the packages you would install: • apollo-boost offers some convenience by bundling several packages you need when working with Apollo Client: • apollo-client: Where all the magic happens • apollo-cache-inmemory: Our recommended cache • apollo-link-http: An Apollo Link for remote data fetching • apollo-link-error: An Apollo Link for error handling • apollo-link-state: An Apollo Link for local state management • graphql-tag: Exports the gql function for your queries & mutations • react-apollo contains the bindings to use Apollo Client with React. • graphql contains Facebook’s reference implementation of GraphQL - Apollo Client uses some of its functionality as well.
- 17. HOW TO GET STARTED .. Frontend Creating the app •First, you are going to create the React project! As mentioned in the beginning, you’ll use create- react-app for that, In any terminal, type npm create-react-app application-react-apollo This will create a new directory called application-react-apollo that has all the basic configuration setup. Navigate to directory and start the application with npm start This will open a browser and navigate to http://localhost:3000 where the app is running. If everything went well, you will see a react welcome page on the screen.
- 18. CONTINUED.. ▸Your project structure should look like • Prepare styling This tutorial is about the concepts of GraphQL and how you can use it from within a React application, so we want to spend the least time possible on styling. To reduce the usage of CSS in this project, you can use the Tachyons library which provides a number of CSS classes. • Install Apollo Client Next, you need to pull in the functionality of Apollo Client (and its React bindings) which comes in several packages:
- 19. ▸In terminal, type npm install apollo- boost react-apollo graphql •Configure ApolloClient Apollo abstracts away all lower-level networking logic and provides a nice interface to the GraphQL server. In contrast to working with REST APIs, you don’t have to deal with constructing your own HTTP requests any more - instead you can simply write queries and mutations and send them using an ApolloClient instance. The first thing you have to do when using Apollo is configure your ApolloClient instance. It needs to know the endpoint of your GraphQL API so it can deal with the network connections. That’s it, you’re all set for the frontend to to start for loading some data into your app! 😎 /application-react-graphql/src/index.js
- 20. CONCLUSION We’ve just scratched the surface of what the abstractions and capabilities of GraphQL can provide.
- 21. TEXT Thank you