Skip to content

Commit 07cf70d

Browse files
committed
Version 0.0.2
1 parent a29b61e commit 07cf70d

File tree

3 files changed

+42
-7
lines changed

3 files changed

+42
-7
lines changed

reactium_modules/@reactium/graphql/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"version": "6.1.1"
77
},
88
"name": "@reactium/graphql",
9-
"version": "0.0.1",
9+
"version": "0.0.2",
1010
"description": "GraphQL Support for Reactium",
1111
"main": "index.js",
1212
"scripts": {

readme.md

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,47 @@ Provides an Apollo GraphQL client on Reactium.GraphQL singleton in Reactium proj
44

55
## Install
66

7-
`npx reactium install @reactium/graphql`
7+
```sh
8+
npx reactium install @reactium/graphql
9+
```
10+
11+
## Usage
12+
13+
See [Apollo Client (React)](https://www.apollographql.com/docs/react) documentation for full details.
14+
15+
This plugin already sets up the Apollo client as a context provider for the Reactium application, so you can begin using the `gql` with React hooks immediately.
16+
17+
```jsx
18+
import { gql, useQuery } from '@apollo/client';
19+
import React from 'react';
20+
21+
const GET_USERS = gql`
22+
query GetUsers {
23+
users {
24+
id
25+
name
26+
email
27+
}
28+
}
29+
`;
30+
31+
export const UsersList = () => {
32+
const { loading, error, data } = useQuery(GET_USERS);
33+
if (loading) return <div>Loading...</div>;
34+
else if (error) return <div>Error: {error}</div>;
35+
const { users } = data;
36+
37+
return (
38+
<ul>
39+
{users.map(({ id, name, email }) => (
40+
<li key={id}>
41+
{name}: {email}
42+
</li>
43+
))}
44+
</ul>
45+
);
46+
};
47+
```
848

949
## Configuration
1050

src/app/components/ApolloTest/ApolloTest.jsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,6 @@ const GET_USERS = gql`
1111
}
1212
`;
1313

14-
/**
15-
* -----------------------------------------------------------------------------
16-
* Component: ApolloTest
17-
* -----------------------------------------------------------------------------
18-
*/
1914
export const ApolloTest = () => {
2015
const { loading, error, data } = useQuery(GET_USERS);
2116
if (loading) return <div>Loading...</div>;

0 commit comments

Comments
 (0)