@@ -20,7 +20,7 @@ _[GraphQL Weekly #42](https://graphqlweekly.com/issues/42)_
20
20
- "Skip Relay" option that simplifies graph by removing Relay wrapper classes
21
21
- Ability to choose any type to be a root of the graph
22
22
23
- ## Usage
23
+ ## API
24
24
25
25
GraphQL Voyager exports ` Voyager ` React component and helper ` init ` function. If used without
26
26
module system it is exported as ` GraphQLVoyager ` global variable.
@@ -53,7 +53,7 @@ The signature of the `init` function:
53
53
- ` hostElement ` - parent element
54
54
- ` options ` - is the JS object with [ properties] ( #properties ) of ` Voyager ` component
55
55
56
- ### Using pre-bundled version
56
+ ## Using pre-bundled version
57
57
58
58
You can get GraphQL Voyager bundle from the following places:
59
59
@@ -62,69 +62,13 @@ You can get GraphQL Voyager bundle from the following places:
62
62
- latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.standalone.js
63
63
- from ` dist ` folder of the npm package ` graphql-voyager `
64
64
65
- ** The HTML with minimal setup** (see the full [ example] ( ./example/cdn ) )
66
-
67
- ``` html
68
- <!DOCTYPE html>
69
- <html >
70
- <head >
71
- <link
72
- rel =" stylesheet"
73
- href =" https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.css"
74
- />
75
- <script src =" https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.standalone.js" ></script >
76
- </head >
77
- <body >
78
- <div id =" voyager" >Loading...</div >
79
- <script >
80
- // do a call to server using voyagerIntrospectionQuery provided
81
- const query = GraphQLVoyager .voyagerIntrospectionQuery ;
82
- const introspection = fetch (' <server url>' , {
83
- method: ' post' ,
84
- headers: {
85
- Accept: ' application/json' ,
86
- ' Content-Type' : ' application/json' ,
87
- },
88
- body: JSON .stringify ({ query }),
89
- // ...
90
- }).then ((response ) => response .json ());
91
- // or just return pre-fetched introspection
92
-
93
- // Render <Voyager />
94
- GraphQLVoyager .init (document .getElementById (' voyager' ), {
95
- introspection: introspection,
96
- });
97
- </script >
98
- </body >
99
- </html >
100
- ```
101
-
102
- ### Using as a dependency
103
-
104
- You can install lib:
105
-
106
- npm i --save graphql-voyager
65
+ ### [ HTML example] ( ./example/cdn )
107
66
108
- And then use it:
67
+ ## Using as a dependency
109
68
110
- ``` js
111
- import * as React from ' react' ;
112
- import * as ReactDOM from ' react-dom' ;
113
- import { Voyager , voyagerIntrospectionQuery } from ' graphql-voyager' ;
114
-
115
- const introspection = fetch (window .location .origin + ' /graphql' , {
116
- method: ' post' ,
117
- headers: { ' Content-Type' : ' application/json' },
118
- body: JSON .stringify ({ query: voyagerIntrospectionQuery }),
119
- }).then ((response ) => response .json ());
120
-
121
- ReactDOM .render (
122
- < Voyager introspection= {introspection} / > ,
123
- document .getElementById (' voyager' ),
124
- );
125
- ```
69
+ Build for the web with [ webpack] ( https://webpack.js.org/ ) , or any other bundle.
126
70
127
- Build for the web with [ webpack ] ( https://webpack.js.org/ ) , see ( [ example] ( ./example/webpack-example ) )
71
+ ### [ Webpack example] ( ./example/webpack )
128
72
129
73
## Middleware
130
74
0 commit comments