8000 Link to Github to enable the reader to run the query and get data · JavaScriptExpert/apollo@05c3c90 · GitHub
[go: up one dir, main page]
Skip to content

Commit 05c3c90

Browse files
unicodeveloperpeggyrayzis
unicodeveloper
authored and
peggyrayzis
committed
Link to Github to enable the reader to run the query and get data
1 parent 977bd82 commit 05c3c90

File tree

1 file changed

+56
-44
lines changed

1 file changed

+56
-44
lines changed

‎docs/source/tutorial/queries.md

Lines changed: 56 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import { Query } from 'react-apollo';
2525
import gql from 'graphql-tag';
2626
import styled from 'react-emotion';
2727

28+
import LaunchTile from './launch-tile';
29+
2830
const LIST_LAUNCHES = gql`
2931
query launchList($after: String) {
3032
isLoggedIn @client
@@ -98,10 +100,12 @@ To fetch data using the `Query` component, a query string needs to be passed to
98100

99101
The `Query` component uses a render prop pattern, so we passed a function as a child to the component that contains what React will render to the screen. The `Query` component provides us with a `loading`, `error`, and `data` property that keeps the user informed about the status of the query operation on the screen. If it's in a loading state, the user sees **Loading...** on the screen. If there's an error, the user sees **ERROR** on the screen.
100102

101-
If the data was returned successfully, then the launches are retrieved from the `data` property and displayed on the screen via the `LaunchTile` component.
103+
If the data was returned successfully, then the launches are retrieved from the `data` property and displayed on the screen via the `LaunchTile` component. For now, you can copy the contents of `src/components/launch-tile.js` from the [Launch Tile component on GitHub](https://github.com/apollographql/fullstack-tutorial/blob/client/client/src/components/launch-tile.js).
102104

103105
Now, there are a lot of launches. If all the launches are fetched at once and displayed, the result will be a long undesirable list. Therefore, let's build a pagination feature that accomodates the loading of a few items at once and display a `Load More` button for loading more items on the screen.
104106

107+
The `@client` directive added to the `isLoggedIn` field fetches local data from the Apollo Cache instead of making a network request like the rest of the fields in the `launchlist` query. You'll know more about this in the [Managing local State](./local-state.html) section.
108+
105109
<h2 id="pagination">Build a paginated list</h2>
106110

107111
There are different approaches to building a paginated list. You'll build a pagination feature using the `cursor-based` approach. The cursor keeps track of where in the data set the next items should be fetched from.
@@ -111,52 +115,60 @@ In the code below, we use a `fetchMore` query to continuously load new launches,
111115
Copy the code below and add to the `LaunchList` class.
112116

113117
```js
114-
<Query query={LIST_LAUNCHES}>
115-
{({ data, loading, error, fetchMore }) => {
116-
if (loading) return <p>Loading...</p>;
117-
if (error) return <p>ERROR</p>;
118+
...
119+
export default class LaunchList extends React.Component {
120+
updateQuery = (prev, { fetchMoreResult }) => {
121+
if (!fetchMoreResult) return prev;
122+
return {
123+
...fetchMoreResult,
124+
launches: {
125+
...fetchMoreResult.launches,
126+
launches: [
127+
...prev.launches.launches,
128+
...fetchMoreResult.launches.launches,
129+
],
130+
},
131+
};
132+
},
118133

134+
render() {
119135
return (
120-
<Container>
121-
{data.launches && data.launches.launches
122-
? data.launches.launches.map(l => (
123-
<LaunchTile
124-
key={l.id}
125-
launch={l}
126-
isLoggedIn={data.isLoggedIn}
127-
/>
128-
))
129-
: null}
130-
{data.launches && data.launches.hasMore ? (
131-
<LoadMoreButton
132-
onClick={() =>
133-
fetchMore({
134-
variables: {
135-
after: data.launches.cursor,
136-
},
137-
updateQuery: (prev, { fetchMoreResult, ...rest }) => {
138-
if (!fetchMoreResult) return prev;
139-
return {
140-
...fetchMoreResult,
141-
launches: {
142-
...fetchMoreResult.launches,
143-
launches: [
144-
...prev.launches.launches,
145-
...fetchMoreResult.launches.launches,
146-
],
147-
},
148-
};
149-
},
150-
})
151-
}
152-
>
153-
Load More
154-
</LoadMoreButton>
155-
) : null}
156-
</Container>
136+
<Query query={LIST_LAUNCHES}>
137+
{({ data, loading, error, fetchMore }) => {
138+
if (loading) return <p>Loading...</p>;
139+
if (error) return <p>ERROR</p>;
140+
141+
return (
142+
<Container>
143+
{data.launches && data.launches.launches
144+
? data.launches.launches.map(l => (
145+
<LaunchTile
146+
key={l.id}
147+
launch={l}
148+
isLoggedIn={data.isLoggedIn}
149+
/>
150+
))
151+
: null}
152+
{data.launches && data.launches.hasMore ? (
153+
<LoadMoreButton
154+
onClick={() =>
155+
fetchMore({
156+
variables: {
157+
after: data.launches.cursor,
158+
},
159+
updateQuery: this.updateQuery(prev, { fetchMoreResult })
160+
})
161+
}
162+
>
163+
Load More
164+
</LoadMoreButton>
165+
) : null}
166+
</Container>
167+
);
168+
}}
169+
</Query>
157170
);
158-
}}
159-
</Query>
171+
}
160172
```
161173
162174
The easiest way to go about pagination with Apollo is with the `fetchMore` function which is provided as a property by the `Query` component. By default, 20 launches are returned at once. Why 20? The paginate helper function in the `src/utils.js` file accepts a page size of 20 if no argument was passed to specify the number of launches to return.

0 commit comments

Comments
 (0)
0