2
2
3
3
Apollo Client service for React applications
4
4
5
- ## Installation
5
+ ## Installing
6
+
7
+ Using npm:
6
8
7
9
` npm i -s graphql-react-client `
8
- or
10
+
11
+ Using yarn:
12
+
9
13
` yarn add graphql-react-client `
10
14
11
15
## Usage
@@ -19,34 +23,36 @@ import { ApolloClient, ApolloProvider, gqlClient } from 'graphql-react-client';
19
23
import authService from ' ./shared/services/authService' ;
20
24
21
25
gqlClient .init ({
22
- api: ` ${process .env .REACT_APP_API } ` ,
23
- uri: ' /api/' ,
24
- publicUri: ' /api/ public'
26
+ api: ` ${process .env .REACT_APP_API } ` ,
27
+ uri: ' /api/' ,
28
+ publicUri: ' public'
25
29
});
26
30
27
31
async function initScope(scope ) {
28
- const {token, mainRole} = await authService .getSessionData ();
29
- gqlClient .token = token ;
30
- return mainRole === ' TYPE_CUSTOMER' ? ' customer' : scope ;
32
+ const { token, mainRole } = await authService .getSessionData ();
33
+ gqlClient .token = token ;
34
+ return mainRole === ' TYPE_CUSTOMER' ? ' customer' : scope ;
31
35
}
36
+
32
37
let scope;
33
38
initScope (' privateScope' ).then (response => {
34
- scope = response ;
39
+ scope = response ;
35
40
});
36
41
37
42
gqlClient .getClient (scope ).then (async (client : ApolloClient <any >) => {
38
- ReactDOM .render (
39
- < ApolloProvider {... { client }}>
40
- < App / >
41
- < / ApolloProvider > ,
42
- document .getElementById (' root' )
43
- );
43
+ ReactDOM .render (
44
+ < ApolloProvider {... { client }}>
45
+ < App / >
46
+ < / ApolloProvider > ,
47
+ document .getElementById (' root' )
48
+ );
44
49
});
45
-
46
50
```
51
+
47
52
#### and that's it, try it.
48
53
49
54
## Use in the services.
55
+
50
56
``` typescript
51
57
import { gqlClient } from ' graphql-react-client' ;
52
58
@@ -63,14 +69,20 @@ async get(input: any): Promise<CustomerType> {
63
69
const response = await gqlClient .query (' myScope' , GET , { input });
64
70
return response.data.CustomerGet;
65
71
}
72
+
73
+ async update (variables : any , scheme : string ) {
74
+ const response: any = await gqlClient .mutate (' myScope' , scheme , variables );
75
+ return response .data ;
76
+ }
66
77
```
67
78
68
79
## Use in the components.
80
+
69
81
``` typescript
70
82
import { useQuery } from ' graphql-react-client' ;
71
83
72
84
export const GET_LIST = gql `
73
- query ($input: GenericFilterInput) {
85
+ query($input: GenericFilterInput) {
74
86
OrderList(input: $input) {
75
87
page
76
88
pageSize
@@ -85,16 +97,15 @@ export const GET_LIST = gql`
85
97
}
86
98
` ;
87
99
88
-
89
100
const { data, error, loading, refetch } = useQuery (GET_LIST , {
90
- variables: {
91
- input: {
92
- page ,
93
- pageSize ,
94
- order: orderBy ,
95
- where: getFilter (where )
96
- }
97
- },
98
- fetchPolicy: ' network-only'
101
+ variables: {
102
+ input: {
103
+ page ,
104
+ pageSize ,
105
+ order: orderBy ,
106
+ where: getFilter (where )
107
+ }
108
+ },
109
+ fetchPolicy: ' network-only'
99
110
});
100
111
```
0 commit comments