Skip to content

Commit 1a4e63a

Browse files
rwieruchrwieruch
committed
add readme
1 parent d2c1d14 commit 1a4e63a

File tree

2 files changed

+304
-1
lines changed

2 files changed

+304
-1
lines changed

‎README.md‎

Lines changed: 303 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,304 @@
11
# react-graphql-client
2+
3+
A simple GraphQL client for React applications. The library is not meant to be a production ready GraphQL client library. It hasn't powerful features such as caching or a global state. **But** it works and it should show that it's not too difficult to implement a GraphQL client library. You can look into the source code and the example application to see that there is not too much to it. If you feel the urge to build a sophisticated GraphQL client library (for React) on top of it, please do it! I encourage everyone to contribute to this ecosystem, because there should be more players in this field.
4+
5+
## Installation
6+
7+
On the command line, install it with npm: `npm install --save react-graphql-client`
8+
9+
## Setup
10+
11+
In your top level React component, initialize the GraphQL client with a GraphQL endpoint and pass it to the provided Provider component from the library.
12+
13+
```
14+
import React from 'react';
15+
import ReactDOM from 'react-dom';
16+
17+
import GraphQLClient, { Provider } from 'react-graphql-client';
18+
19+
import App from './App';
20+
21+
const client = new GraphQLClient({
22+
baseURL: 'https://mydomain.com/graphql',
23+
});
24+
25+
ReactDOM.render(
26+
<Provider value={client}>
27+
<App />
28+
</Provider>,
29+
document.getElementById('root'),
30+
);
31+
```
32+
33+
That's it. The GraphQL client is accessible in every React component due to [React's Context API](https://www.robinwieruch.de/react-context-api/).
34+
35+
## Query
36+
37+
In order to execute a GraphQL query operation, use the Query component that is provided from the library. The Query component implements the render prop pattern with its child as a function specification. In the child as a function, you have access to the result of the query operation and further information such as loading state and errors.
38+
39+
```
40+
import React from 'react';
41+
42+
import { Query } from 'react-graphql-client';
43+
44+
const GET_ORGANIZATION = `
45+
query (
46+
$organizationLogin: String!
47+
) {
48+
organization(login: $organizationLogin) {
49+
name
50+
url
51+
}
52+
}
53+
`;
54+
55+
const App = () =>
56+
<Query
57+
query={GET_ORGANIZATION}
58+
variables={{
59+
organizationLogin: 'the-road-to-learn-react',
60+
}}
61+
>
62+
{({ data, loading, errors }) => {
63+
if (!data) {
64+
return <p>No information yet ...</p>;
65+
}
66+
67+
const { organization } = data;
68+
69+
if (loading) {
70+
return <p>Loading ...</p>;
71+
}
72+
73+
if (errors) {
74+
return (
75+
<p>
76+
<strong>Something went wrong:</strong>
77+
{errors.map(error => error.message).join(' ')}
78+
</p>
79+
);
80+
}
81+
82+
return (
83+
<Organization organization={organization} />
84+
);
85+
}}
86+
</Query>
87+
```
88+
89+
The query executes when it is rendered. The query and optional variables are passed as props to the Query component. Every time one of those props changes, the query will execute again.
90+
91+
## Query with Pagination
92+
93+
In order to query a paginated list of items, you need to pass in sufficient variables to your query. This is specific to your GraphQL API and not to the library. However, after querying more items (e.g. with a "More"-button), there needs to be a resolver function to merge the previous with the new result.
94+
95+
```
96+
import React from 'react';
97+
98+
import { Query } from 'react-graphql-client';
99+
100+
const GET_REPOSITORIES_OF_ORGANIZATION = `
101+
query (
102+
$organizationLogin: String!,
103+
$cursor: String
104+
) {
105+
organization(login: $organizationLogin) {
106+
name
107+
url
108+
repositories(first: 5, after: $cursor) {
109+
totalCount
110+
pageInfo {
111+
endCursor
112+
hasNextPage
113+
}
114+
edges {
115+
node {
116+
id
117+
name
118+
url
119+
watchers {
120+
totalCount
121+
}
122+
viewerSubscription
123+
}
124+
}
125+
}
126+
}
127+
}
128+
`;
129+
130+
const resolveFetchMore = (data, state) => {
131+
const { edges: oldR } = state.data.organization.repositories;
132+
const { edges: newR } = data.organization.repositories;
133+
134+
const updatedRepositories = [...oldR, ...newR];
135+
136+
return {
137+
organization: {
138+
...data.organization,
139+
repositories: {
140+
...data.organization.repositories,
141+
edges: updatedRepositories,
142+
},
143+
},
144+
};
145+
};
146+
147+
const App = () =>
148+
<Query
149+
query={GET_REPOSITORIES_OF_ORGANIZATION}
150+
variables={{
151+
organizationLogin,
152+
}}
153+
resolveFetchMore={resolveFetchMore}
154+
>
155+
{({ data, loading, errors, fetchMore }) => {
156+
...
157+
158+
return (
159+
<Organization
160+
organization={organization}
161+
onFetchMoreRepositories={() =>
162+
fetchMore({
163+
query: GET_REPOSITORIES_OF_ORGANIZATION,
164+
variables: {
165+
organizationLogin,
166+
cursor:
167+
organization.repositories.pageInfo.endCursor,
168+
},
169+
})
170+
}
171+
/>
172+
);
173+
}}
174+
</Query>
175+
176+
const Organization = ({ organization, onFetchMoreRepositories }) => (
177+
<div>
178+
<h1>
179+
<a href={organization.url}>{organization.name}</a>
180+
</h1>
181+
<Repositories
182+
repositories={organization.repositories}
183+
onFetchMoreRepositories={onFetchMoreRepositories}
184+
/>
185+
186+
{organization.repositories.pageInfo.hasNextPage && (
187+
<button onClick={onFetchMoreRepositories}>More</button>
188+
)}
189+
</div>
190+
);
191+
```
192+
193+
After a click on the "More"-button, the results of both lists of repositories should be merged.
194+
195+
### Mutation
196+
197+
Last but not least, there is a Mutation component analog to the Query component which is used to execute a mutation. However, in contrast to the Quert component, the Mutation component doesn't execute the mutation on render. You get an explicit callback function in the render prop child function for it.
198+
199+
```
200+
import React from 'react';
201+
202+
import { Query, Mutation } from 'react-graphql-client';
203+
204+
...
205+
206+
const WATCH_REPOSITORY = `
207+
mutation($id: ID!, $viewerSubscription: SubscriptionState!) {
208+
updateSubscription(
209+
input: { state: $viewerSubscription, subscribableId: $id }
210+
) {
211+
subscribable {
212+
id
213+
viewerSubscription
214+
}
215+
}
216+
}
217+
`;
218+
219+
const resolveWatchMutation = (data, state) => {
220+
const { totalCount } = state.data.updateSubscription.subscribable;
221+
const { viewerSubscription } = data.updateSubscription.subscribable;
222+
223+
return {
224+
updateSubscription: {
225+
subscribable: {
226+
viewerSubscription,
227+
totalCount:
228+
viewerSubscription === 'SUBSCRIBED'
229+
? totalCount + 1
230+
: totalCount - 1,
231+
},
232+
},
233+
};
234+
};
235+
236+
const Repositories = ({ repositories }) => (
237+
<ul>
238+
{repositories.edges.map(repository => (
239+
<li key={repository.node.id}>
240+
<a href={repository.node.url}>{repository.node.name}</a>
241+
242+
<Mutation
243+
mutation={WATCH_REPOSITORY}
244+
initial={{
245+
updateSubscription: {
246+
subscribable: {
247+
viewerSubscription:
248+
repository.node.viewerSubscription,
249+
totalCount: repository.node.watchers.totalCount,
250+
},
251+
},
252+
}}
253+
resolveMutation={resolveWatchMutation}
254+
>
255+
{(toggleWatch, { data, loading, errors }) => (
256+
<button
257+
type="button"
258+
onClick={() =>
259+
toggleWatch({
260+
variables: {
261+
id: repository.node.id,
262+
viewerSubscription: isWatch(
263+
data.updateSubscription,
264+
)
265+
? 'UNSUBSCRIBED'
266+
: 'SUBSCRIBED',
267+
},
268+
})
269+
}
270+
>
271+
{data.updateSubscription.subscribable.totalCount}
272+
{isWatch(data.updateSubscription)
273+
? ' Unwatch'
274+
: ' Watch'}
275+
</button>
276+
)}
277+
</Mutation>
278+
</li>
279+
))}
280+
</ul>
281+
);
282+
```
283+
284+
Within the Mutation component the `data` object should be used to render relevant information. This data can be set with an initial value by using the `initial` prop on the Mutation component. Furthermore, after executing a mutation, a `resolveMutation` function as a prop can be provided to deal with the previous state and the mutation result. In the previous case, the new `totalCount` wasn't provided by the GraphQL API. So you can do it by yourself with this resolver function.
285+
286+
## Contribute
287+
288+
As mentioned, if you are curious, checkout the _examples/_ folder to get a minimal working application. You need to fulfil the following installation instructions for it:
289+
290+
* npm install
291+
* [add your own REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN in .env file](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/)
292+
* scopes/permissions you need to check: admin:org, repo, user, notifications
293+
* npm start
294+
* visit `http://localhost:3000`
295+
296+
In addition, checkout the _src/_ folder to see that there is not much to implement for a simple GraphQL client. I hope this helps you to build your own library on top of it by forking this repository.
297+
298+
Otherwise, feel free to improve this repository and to fix bugs for it. However, I wouldn't want to grow it into a powerful GraphQL client library. Rather I would love to see this library and repository as inspiration for you and others to contribute to this new GraphQL ecosystem.
299+
300+
## Want to learn more about React + GraphQL + Apollo?
301+
302+
* Don't miss [upcoming Tutorials and Courses](https://www.getrevue.co/profile/rwieruch)
303+
* Check out current [React Courses](https://roadtoreact.com)
304+

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-graphql-client",
3-
"version": "0.1.6",
3+
"version": "0.1.7",
44
"main": "lib/index.js",
55
"peerDependencies": {
66
"react": "^16.3.0",

0 commit comments

Comments
 (0)