forked from loopbackio/loopback.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
openapi-to-graphql.html
240 lines (217 loc) · 10.1 KB
/
openapi-to-graphql.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
---
layout: blank
permalink: /openapi-to-graphql.html
redirect_from: /oasgraph
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<!-- not working -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<title>OpenAPI-to-GraphQL</title>
<!-- Bootstrap core CSS -->
<link href="dist/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
<link href="css/loopback.css" rel="stylesheet">
<link href="css/openapi-to-graphql.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-150726441-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-150726441-2');
</script>
</head>
<body>
<!-- Navbar -->
<div id="navbar-template"></div>
<!-- Header -->
<div class="openapi-to-graphql-masthead">
<h1>OpenAPI-to-GraphQL</h1>
<h5>Take any OpenAPI Specification (OAS) and create a GraphQL interface</h5>
</div>
<!-- How it works section -->
<section class="odd-section">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3 class="text-center">How it works</h3>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/4TrHUBJElrk" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<hr class="openapi-to-graphql-hr">
<!-- Powerful functionality section -->
<section class="even-section">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h3 class="text-center">Powerful functionality</h3>
<br/>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-4 text-center">
<img class="feature-image" src="images/openapi-to-graphql/nested-data-2x.png" alt="Icon depcting nested data"/>
<h4>Nested data</h4>
<p>
Schemas are used to create GraphQL data definitions, and links defined in the OAS are used to create a nested structure, allowing for (deeply) nested queries.
</p>
</div>
<div class="col-sm-12 col-lg-4 text-center">
<img class="feature-image" src="images/openapi-to-graphql/data-sanitization-2x.png" alt="Icon depicting data sanitation"/>
<h4>API Sanitation</h4>
<p>
GraphQL-incompatible identifiers of your API are sanitized. For example, API parameters or data definitions with unsupported characters (e.g., <code>-</code>, <code>.</code>, <code>,</code>, <code>:</code>, <code>;</code>...) are removed.
</p>
</div>
<div class="col-sm-12 col-lg-4 text-center">
<img class="feature-image" src="images/openapi-to-graphql/authentication-2x.png" alt="Icon depicting authentication"/>
<h4>Authentication</h4>
<p>
OpenAPI-to-GraphQL provides <em>viewers</em> to support passing API keys or basic auth credentials. OAuth 2.0 integration can be handled by the hosting application (<a href="https://github.com/ibm/openapi-to-graphql/tree/master/packages/openapi-to-graphql#authentication" target="_blank" rel="noopener noreferrer">learn more...</a>).
</p>
</div>
</div>
</div>
</section>
<hr class="openapi-to-graphql-hr">
<!-- Get started section -->
<section class="odd-section">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8">
<h3>Get started</h3>
<h5>Ready to translate from REST to GraphQL? Let's get you started!</h5>
<a class="btn btn-secondary" style="padding-left:60px; padding-right:60px; top: 20%" role="button" href="getting-started-openapi-to-graphql.html">View Guide</a>
</div>
<div class="col-sm-12 col-md-4">
<img class="get-started-image float-right" src="images/openapi-to-graphql-getting-started/rocketship-2x.png" alt="Icon showing a rocket and depicting getting started"/>
</div>
</div>
</div>
</section>
<hr class="openapi-to-graphql-hr">
<!-- How can we help -->
<section class="even-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3 class="section-heading">How can we help?</h3>
<p>We've curated resources to help you get started faster with OpenAPI-to-GraphQL.</p>
<p style="height:36px"></p>
</div>
</div>
<div class="row text-center" style="justify-content: center">
<div class="col-sm-12 col-md-6">
<a class="openapi-to-graphql-card" href="https://strongloop.com/strongblog/" target="_blank" rel="noopener noreferrer">
<div class="row">
<div class="col-sm-3">
<img class="help-image" src="images/openapi-to-graphql/blog-posts-2x.png" alt="Icon depicting blog"/>
</div>
<div class="col-sm-9">
<h5 class="card-title">Blog posts</h5>
<p class="regular text-gray">Visit our blog for all developer-related articles, tips, and advice.</p>
</div>
</div>
</a>
</div>
<div class="col-sm-12 col-md-6">
<a class="openapi-to-graphql-card" href="https://github.com/ibm/openapi-to-graphql" target="_blank" rel="noopener noreferrer">
<div class="row">
<div class="col-sm-3">
<img class="help-image" src="images/openapi-to-graphql/git-repository-2x.png" alt="Icon depicting Git repository"/>
</div>
<div class="col-sm-9">
<h5 class="card-title">Git repository</h5>
<p class="regular text-gray">Learn from or contribute to our repository, complete with regularly updated documentation.</p>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
<div class="container">
<div class="row text-center">
<div class="col-md-3">
<img src="images/global/loopback-mark-frame-white.svg" width=40px/>
</div>
<div class="col-md-3">
<p class="label text-uppercase">Product</p>
<p class="regular">
<a href="getting-started.html">Getting Started</a>
</p>
<p class="regular">
<a href="doc/en/lb4/Tutorials.html">Tutorials</a>
</p>
</div>
<div class="col-md-3">
<p class="label text-uppercase" >Documentation</p>
<p class="regular">
<a href="/doc">Docs</a>
</p>
<p class="regular">
<a href="resources.html">Resources</a>
</p>
<p class="regular">
<a href="contribute.html">Contribute</a>
</p>
</div>
<div class="col-md-3">
<p class="label text-uppercase">Support</p>
<p class="regular">
<a href="/doc/en/lb4">LoopBack 4 Documentation</a>
</p>
<p class="regular">
<a href="https://loopback.io/doc/en/lb4/apidocs.index.html" target="_blank" rel="noopener noreferrer">API Docs</a>
</p>
<p class="regular">
<a href="https://strongloop.com/strongblog/" target="_blank" rel="noopener noreferrer">StrongLoop Blog</a>
</p>
<p class="regular">
<a href="https://www.ibm.com/marketplace/api-management" target="_blank" rel="noopener noreferrer">API Connect</a>
</p>
</div>
</div>
<hr class="hairline-footer">
<div class="row text-center">
<div class="col-md-6">
<p class="regular"> © Copyright 2020 StrongLoop, an IBM company</p>
</div>
<div class="col-md-6">
<p style="float:right">
<a class="twitter-share-button"
href="https://twitter.com/intent/tweet?text=Creating APIs has never been easier using %23LoopBack 4 by %40StrongLoop. Check it out at loopback.io.&url=loopback.io">
Tweet</a>
<a href="https://twitter.com/intent/tweet?screen_name=StrongLoop&ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true">Tweet to @StrongLoop</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</p>
</div>
</div>
</div>
</footer>
<script src="/dist/jquery/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script src="dist/popper/1.14.0/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="dist/bootstrap/js/bootstrap.min.js"></script>
<!-- GitHub button -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Load the NavBar template -->
<script>
$(function(){
$("#navbar-template").load("navbar-template.html");
});
</script>
</body>
</html>