Skip to content

Commit 8b009be

Browse files
peggyrayzispeggyrayzis
committed
Almost done section on benefits, started state mgmt
1 parent a3c3f09 commit 8b009be

2 files changed

Lines changed: 125 additions & 4 deletions

File tree

‎docs/source/fundamentals/benefits.md‎

Lines changed: 100 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,105 @@ title: GraphQL benefits
33
description: Why adopting GraphQL and Apollo will help you ship features faster
44
---
55

6-
## Declarative data fetching
6+
// insert intro here
77

8-
## Improved performance
8+
<h2 id="declarative">Declarative data fetching</h2>
99

10-
## Developer experience
10+
One of the main advantages of adopting GraphQL is its declarative approach to data fetching. With GraphQL, there's no need to call multiple endpoints from the client or aggregate the data manually like you have to with traditional REST data fetching. Instead, you specify exactly the data you need and GraphQL gives you exactly what you asked for.
11+
12+
With REST, you would have to call all of these endpoints for each item in the list, filter down the data you need, and aggregate all of the remaining data into the shape your components consume.
13+
14+
```bash
15+
GET /api/dogs/breeds
16+
GET /api/dogs/images
17+
GET /api/dogs/activities
18+
```
19+
20+
Not only is this approach time-consuming, it's also prone to error and difficult to reuse logic across platforms. Compare this with GraphQL's declarative way to query data:
21+
22+
```graphql
23+
const GET_DOGS = gql`
24+
query {
25+
dogs {
26+
id
27+
breed
28+
image {
29+
url
30+
}
31+
activities {
32+
name
33+
}
34+
}
35+
}
36+
`;
37+
```
38+
39+
Here, we're describing the shape of the object we want to receive from the server. GraphQL takes care of combining and filtering the data while returning exactly what we ask for.
40+
41+
How do we use this query in our app? Apollo Client builds off of GraphQL's declarative approach to data fetching. In a React app, all of the logic for retrieving your data, tracking loading and error states, and updating your UI is encapsulated in a single Query component. This encapsulation makes composing your data fetching components with your presentational components a breeze! Let’s see how to fetch GraphQL data with Apollo Client in a React app:
42+
43+
```jsx
44+
const Feed = () => (
45+
<Query query={GET_DOGS}>
46+
{({ loading, error, data }) => {
47+
if (error) return <Error />
48+
if (loading || !data) return <Fetching />;
49+
50+
return <DogList dogs={data.dogs} />
51+
}}
52+
</Query>
53+
);
54+
```
55+
56+
Apollo Client takes care of the request cycle from start to finish, including tracking loading and error states for you. There’s no middleware to set up or boilerplate to write before making your first request, nor do you need to worry about transforming and caching the response. All you have to do is describe the data your component needs and let Apollo Client do the heavy lifting. 💪
57+
58+
You’ll find that when you switch to Apollo Client, you’ll be able to delete a lot of unnecessary code related to data management. The exact amount will vary depending on your application, but some teams have reported up to thousands of lines. To learn more about how Apollo Client enables advanced features like optimistic UI, refetching, and pagination with less code, check out our guide on [state management](../guides/state-mgmt.html).
59+
60+
<h2 id="performance">Improved performance</h2>
61+
62+
In many cases, layering a GraphQL API over your existing REST endpoints can improve your app's performance, especially on devices with slow network connections. While you should always measure to determine how integrating GraphQL will affect your application, it's generally accepted that GraphQL improves performance by helping avoid round trips to the server and reducing payload size.
63+
64+
<h3 id="payload">Smaller payloads</h3>
65+
66+
Since the response back from the server contains only the properties you specify in your query, GraphQL can significantly reduce payload size compared to a REST endpoint. Let's take a look at our dogs query from earlier in the article:
67+
68+
```graphql
69+
const GET_DOGS = gql`
70+
query {
71+
dogs {
72+
id
73+
breed
74+
image {
75+
url
76+
}
77+
activities {
78+
name
79+
}
80+
}
81+
}
82+
`;
83+
```
84+
85+
The response back from the server will be a list of dog objects with `id`, `breed`, `image`, and `activities` properties. It doesn't matter if the underlying REST endpoints we call in our resolvers return back objects with 100 properties! All of those extraneous properties will be filtered out before the response is sent back to the client.
86+
87+
<h3 id="round-trip">Avoid round trips</h3>
88+
89+
Since each GraphQL request returns only one response, switching to GraphQL can help you avoid costly round trips from the client to your server. With REST, each resource represents a round trip, which can quickly add up. If you're fetching items in a list, you'll have to complete a round trip for every resource multiplied by the number of items, causing slow load times especially on mobile devices.
90+
91+
```bash
92+
GET /api/dogs/breeds
93+
GET /api/dogs/images
94+
GET /api/dogs/activities
95+
```
96+
97+
With GraphQL, each query represents a single round trip from the client to server. If you'd like to reduce round trips even further, you can implement [query batching](https://www.apollographql.com/docs/engine/query-batching.html) to batch multiple queries into a single request.
98+
99+
<h2 id="dev-experience">Developer experience</h2>
100+
101+
Implementing GraphQL in your organization via the Apollo platform can help you ship features faster due to its excellent developer experience. Features that are normally difficult to execute, such as fullstack caching, data normalization, and optimistic UI suddenly become trivial thanks to Apollo Client, Apollo Server, and Apollo Engine. Our #1 goal is to simplify data management across the stack.
102+
103+
<h3 id="data">Explore your API</h3>
104+
105+
<h3 id="frontend">Simplify front-end code</h3>
106+
107+
<h3 id="tooling">Advanced, modern tooling</h3>

‎docs/source/guides/state-mgmt.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,28 @@
11
---
22
title: State management
33
description: Managing your local and remote state in a GraphQL world
4-
---
4+
---
5+
6+
Thousands of developers have told us that Apollo Client excels at managing remote data, which equates to roughly 80% of their data needs. But what about local data (like global flags and device API results) that make up the other 20% of the pie? This is where `apollo-link-state` comes in, our solution for local state management that allows you to use your Apollo cache as the single source of truth for data in your application. Managing all your data with Apollo Client allows you to take advantage of GraphQL as a unified interface to all of your data.
7+
8+
<h2 id="colocate">Colocate queries with components</h2>
9+
10+
<h2 id="transformation">Move data transformation to the backend</h2>
11+
12+
<h2 id="combine">Combine local and remote data</h2>
13+
14+
With `apollo-link-state`, you can add client-side only fields to your remote data seamlessly and query them from your components. In this example, we’re querying the client-only field isLiked alongside our server data. Your components are made up of local and remote data, now your queries can be too!
15+
16+
```graphql
17+
const GET_DOG = gql`
18+
query getDogByBreed($breed: String!) {
19+
dog(breed: $breed) {
20+
images {
21+
url
22+
id
23+
isLiked @client
24+
}
25+
}
26+
}
27+
`;
28+
```

0 commit comments

Comments
 (0)