22
33Apollo Client service for React applications
44
5- ## Installation
5+ ## Installing
6+
7+ Using npm:
68
79` npm i -s graphql-react-client `
8- or
10+
11+ Using yarn:
12+
913` yarn add graphql-react-client `
1014
1115## Usage
@@ -19,34 +23,36 @@ import { ApolloClient, ApolloProvider, gqlClient } from 'graphql-react-client';
1923import authService from ' ./shared/services/authService' ;
2024
2125gqlClient .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'
2529});
2630
2731async 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 ;
3135}
36+
3237let scope;
3338initScope (' privateScope' ).then (response => {
34- scope = response ;
39+ scope = response ;
3540});
3641
3742gqlClient .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+ );
4449});
45-
4650```
51+
4752#### and that's it, try it.
4853
4954## Use in the services.
55+
5056``` typescript
5157import { gqlClient } from ' graphql-react-client' ;
5258
@@ -63,14 +69,20 @@ async get(input: any): Promise<CustomerType> {
6369 const response = await gqlClient .query (' myScope' , GET , { input });
6470return response.data.CustomerGet;
6571}
72+
73+ async update (variables : any , scheme : string ) {
74+ const response: any = await gqlClient .mutate (' myScope' , scheme , variables );
75+ return response .data ;
76+ }
6677```
6778
6879## Use in the components.
80+
6981``` typescript
7082import { useQuery } from ' graphql-react-client' ;
7183
7284export const GET_LIST = gql `
73- query ($input: GenericFilterInput) {
85+ query($input: GenericFilterInput) {
7486 OrderList(input: $input) {
7587 page
7688 pageSize
@@ -85,16 +97,15 @@ export const GET_LIST = gql`
8597 }
8698` ;
8799
88-
89100const { 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'
99110});
100111```
0 commit comments