Skip to content

Commit f774289

Browse files
Replace examples in README with links (#314)
1 parent 288eb6b commit f774289

File tree

7 files changed

+6
-62
lines changed

7 files changed

+6
-62
lines changed

β€ŽREADME.md

+6-62
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ _[GraphQL Weekly #42](https://graphqlweekly.com/issues/42)_
2020
- "Skip Relay" option that simplifies graph by removing Relay wrapper classes
2121
- Ability to choose any type to be a root of the graph
2222

23-
## Usage
23+
## API
2424

2525
GraphQL Voyager exports `Voyager` React component and helper `init` function. If used without
2626
module system it is exported as `GraphQLVoyager` global variable.
@@ -53,7 +53,7 @@ The signature of the `init` function:
5353
- `hostElement` - parent element
5454
- `options` - is the JS object with [properties](#properties) of `Voyager` component
5555

56-
### Using pre-bundled version
56+
## Using pre-bundled version
5757

5858
You can get GraphQL Voyager bundle from the following places:
5959

@@ -62,69 +62,13 @@ You can get GraphQL Voyager bundle from the following places:
6262
- latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.standalone.js
6363
- from `dist` folder of the npm package `graphql-voyager`
6464

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)
10766

108-
And then use it:
67+
## Using as a dependency
10968

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.
12670

127-
Build for the web with [webpack](https://webpack.js.org/), see ([example](./example/webpack-example))
71+
### [Webpack example](./example/webpack)
12872

12973
## Middleware
13074

File renamed without changes.
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
Β (0)