Skip to content

Commit b95dab5

Browse files
OJ423gitbook-bot
OJ423
authored and
gitbook-bot
committed
GITBOOK-139: GraphQL Updates
1 parent 3028923 commit b95dab5

File tree

4 files changed

+262
-4
lines changed

4 files changed

+262
-4
lines changed

‎guides/how-to-guides/query-using-graphql/use-graphql-with-the-apollo-client.md‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
---
2+
description: How to use GraphQL with the Apollo Client with TerminusDB & TerminusCMS
3+
---
4+
5+
# Use GraphQL with the Apollo Client
6+
7+
1. Install dependencies
8+
9+
```sh
10+
npm install @apollo/client graphql
11+
```
12+
13+
2. To initialize ApolloClient and connect with TerminusDB/CMS import these dependencies
14+
15+
```javascript
16+
import { ApolloClient, InMemoryCache, ApolloProvider, gql,HttpLink,ApolloLink } from '@apollo/client';
17+
```
18+
19+
Initialize ApolloClient by passing its constructor with a configuration object with the TerminusDB server endpoint, user credentials and cache fields.
20+
21+
> Extra information about the Apollo client cache can be found on their [website](https://www.apollographql.com/docs/react/caching/overview)
22+
23+
### Connect with TerminusDB Local
24+
25+
```javascript
26+
const orgName = "myOrganizationName"
27+
const dbName = "myDBname"
28+
const myBranch = "main"
29+
30+
const user = "admin"
31+
const password = "mypass"
32+
const userPassEnc = btoa(`${user}:${password}`)
33+
34+
const terminusdbURL = `http://127.0.0.1:6363/api/graphql/${orgName}/${dbName}/local/branch/${myBranch}/`
35+
36+
const httpLink = new HttpLink({ uri: terminusdbURL });
37+
const authMiddleware = new ApolloLink((operation, forward) => {
38+
// add the authorization to the headers
39+
operation.setContext(({ headers = {} }) => ({
40+
headers: {
41+
...headers,
42+
authorization: `Basic ${userPassEnc}`}
43+
}));
44+
return forward(operation);
45+
})
46+
47+
const cache = new InMemoryCache({
48+
addTypename: false
49+
});
50+
51+
const value = concat(authMiddleware, httpLink)
52+
53+
const apolloClient = new ApolloClient({
54+
cache:cache,
55+
link: value,
56+
});
57+
58+
3. Query your database
59+
60+
apolloClient
61+
.query({
62+
query: gql`
63+
query{
64+
Person{
65+
_id
66+
name
67+
}
68+
}
69+
`,
70+
})
71+
.then((result) => console.log(result));
72+
```
73+
74+
### Connect with TerminusCMS
75+
76+
> You will need to [get your API key](../../../terminuscms/get-api-key.md) to connect with terminusCMS
77+
78+
```javascript
79+
const orgName = "myOrganizationName"
80+
const dbName = "myDBname"
81+
const myBranch = "main"
82+
83+
const user = "admin"
84+
const password = "mypass"
85+
const userPassEnc = btoa(`${user}:${password}`)
86+
87+
const terminusdbURL = `https://cloud.terminusdb.com/${orgName}/api/graphql/${orgName}/${dbName}/local/branch/${myBranch}/`
88+
const myAPIToken = 'replaceYourToken'
89+
90+
const httpLink = new HttpLink({ uri: terminusdbURL });
91+
const authMiddleware = new ApolloLink((operation, forward) => {
92+
// add the authorization to the headers
93+
operation.setContext(({ headers = {} }) => ({
94+
headers: {
95+
...headers,
96+
authorization: `Token ${myAPIToken}`}
97+
}));
98+
return forward(operation);
99+
})
100+
101+
const cache = new InMemoryCache({
102+
addTypename: false
103+
});
104+
105+
const value = concat(authMiddleware, httpLink)
106+
107+
const apolloClient = new ApolloClient({
108+
cache:cache,
109+
link: value,
110+
});
111+
112+
3. Query your database
113+
114+
apolloClient
115+
.query({
116+
query: gql`
117+
query{
118+
Person{
119+
_id
120+
name
121+
}
122+
}
123+
`,
124+
})
125+
.then((result) => console.log(result));
126+
```

‎guides/reference-guides/graphql-reference/connect-with-apollo-client.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
description: >-
3+
A reference guide to get you up and running with TerminusDB & TerminusCMS
4+
using GraphQL and Apollo Client
5+
---
6+
7+
# Connect with Apollo Client
8+
9+
1. Install dependencies
10+
11+
```sh
12+
npm install @apollo/client graphql
13+
```
14+
15+
2. To initialize ApolloClient and connect with TerminusDB/CMS import these dependencies
16+
17+
```javascript
18+
import { ApolloClient, InMemoryCache, ApolloProvider, gql,HttpLink,ApolloLink } from '@apollo/client';
19+
```
20+
21+
Initialize ApolloClient by passing its constructor with a configuration object with the TerminusDB server endpoint, user credentials and cache fields.
22+
23+
> Extra information about the Apollo client cache can be found on their [website](https://www.apollographql.com/docs/react/caching/overview)
24+
25+
### Connect with TerminusDB Local
26+
27+
```javascript
28+
const orgName = "myOrganizationName"
29+
const dbName = "myDBname"
30+
const myBranch = "main"
31+
32+
const user = "admin"
33+
const password = "mypass"
34+
const userPassEnc = btoa(`${user}:${password}`)
35+
36+
const terminusdbURL = `http://127.0.0.1:6363/api/graphql/${orgName}/${dbName}/local/branch/${myBranch}/`
37+
38+
const httpLink = new HttpLink({ uri: terminusdbURL });
39+
const authMiddleware = new ApolloLink((operation, forward) => {
40+
// add the authorization to the headers
41+
operation.setContext(({ headers = {} }) => ({
42+
headers: {
43+
...headers,
44+
authorization: `Basic ${userPassEnc}`}
45+
}));
46+
return forward(operation);
47+
})
48+
49+
const cache = new InMemoryCache({
50+
addTypename: false
51+
});
52+
53+
const value = concat(authMiddleware, httpLink)
54+
55+
const apolloClient = new ApolloClient({
56+
cache:cache,
57+
link: value,
58+
});
59+
60+
3. Query your database
61+
62+
apolloClient
63+
.query({
64+
query: gql`
65+
query{
66+
Person{
67+
_id
68+
name
69+
}
70+
}
71+
`,
72+
})
73+
.then((result) => console.log(result));
74+
```
75+
76+
### Connect with TerminusCMS
77+
78+
> You will need to [get your API key](../../../terminuscms/get-api-key.md) to connect with terminusCMS
79+
80+
```javascript
81+
const orgName = "myOrganizationName"
82+
const dbName = "myDBname"
83+
const myBranch = "main"
84+
85+
const user = "admin"
86+
const password = "mypass"
87+
const userPassEnc = btoa(`${user}:${password}`)
88+
89+
const terminusdbURL = `https://cloud.terminusdb.com/${orgName}/api/graphql/${orgName}/${dbName}/local/branch/${myBranch}/`
90+
const myAPIToken = 'replaceYourToken'
91+
92+
const httpLink = new HttpLink({ uri: terminusdbURL });
93+
const authMiddleware = new ApolloLink((operation, forward) => {
94+
// add the authorization to the headers
95+
operation.setContext(({ headers = {} }) => ({
96+
headers: {
97+
...headers,
98+
authorization: `Token ${myAPIToken}`}
99+
}));
100+
return forward(operation);
101+
})
102+
103+
const cache = new InMemoryCache({
104+
addTypename: false
105+
});
106+
107+
const value = concat(authMiddleware, httpLink)
108+
109+
const apolloClient = new ApolloClient({
110+
cache:cache,
111+
link: value,
112+
});
113+
114+
3. Query your database
115+
116+
apolloClient
117+
.query({
118+
query: gql`
119+
query{
120+
Person{
121+
_id
122+
name
123+
}
124+
}
125+
`,
126+
})
127+
.then((result) => console.log(result));
128+
```
129+
130+
\

‎guides/reference-guides/graphql-reference/connecting_to_graphql.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,17 @@ For example, if you would like to connect to `admin/people` with the apollo clie
3434
npx apollo client:download-schema --endpoint=http://127.0.0.1:6363/api/graphql/admin/people schema.graphql --header='Authorization: Basic YWRtaW46cm9vdA=='
3535
```
3636

37-
### TerminusX: COMING SOON!
37+
### TerminusCMS
3838

39-
In TerminusX you can use an API key with the following header.
39+
In TerminusCMS you can use an API key with the following header.
4040

41-
For instance, with the apollo client, you can download your schema as follows:
41+
For instance, with the Apollo client, you can download your schema as follows:
4242

4343
```shell
4444
npx apollo client:download-schema --endpoint=https://cloud.terminusdb.com/TEAM/api/graphql/TEAM/people schema.graphql --header="Authorization: Token $(cat ~/my_token_file)"
4545
```
4646

47-
Where `my_token_file` contains an API token for TerminusX.
47+
Where `my_token_file` contains an API token for TerminusCMS.
4848

4949
## GraphiQL
5050

‎summary.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
* [Reset a Project](guides/how-to-guides/use-collaboration-features/with-terminuscms/reset-a-project.md)
8080
* [Squash Commits](guides/how-to-guides/use-collaboration-features/with-terminuscms/squash-commits.md)
8181
* [Query using GraphQL](guides/how-to-guides/query-using-graphql/README.md)
82+
* [Use GraphQL with the Apollo Client](guides/how-to-guides/query-using-graphql/use-graphql-with-the-apollo-client.md)
8283
* [GraphQL Basics](guides/how-to-guides/query-using-graphql/graphql-basics.md)
8384
* [Filter with GraphQL](guides/how-to-guides/query-using-graphql/filter-with-graphql.md)
8485
* [Advanced Filtering with GraphQL](guides/how-to-guides/query-using-graphql/advanced-filtering-with-graphql.md)
@@ -119,6 +120,7 @@
119120
* [GraphQL Reference](guides/reference-guides/graphql-reference/README.md)
120121
* [GraphQL Queries](guides/reference-guides/graphql-reference/graphql\_query.md)
121122
* [Connecting to GraphQL](guides/reference-guides/graphql-reference/connecting\_to\_graphql.md)
123+
* [Connect with Apollo Client](guides/reference-guides/graphql-reference/connect-with-apollo-client.md)
122124
* [GraphQL Naming Conventions](guides/reference-guides/graphql-reference/naming.md)
123125
* [System Graph Inferface to GraphQL](guides/reference-guides/graphql-reference/system\_graph.md)
124126
* [HTTP API](guides/reference-guides/openapi.md)

0 commit comments

Comments
 (0)