Skip to content

Commit f4854ba

Browse files
MartinKavikMartinKavik
committed
examples: GraphQL example
1 parent 1ad9fb6 commit f4854ba

12 files changed

+477
-0
lines changed

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@
4040
- [deprecated] - `seed::browser::service::fetch` module is deprecated in favor of `seed::browser::fetch`.
4141
- Added example `fetch`.
4242
- Implemented `IntoNodes` for `Option<Node<Msg>>` and `Option<Vec<Node<Msg>>>`.
43+
- Added example `graphql` (#400).
44+
- Implemented `UpdateEl` for `i64` and `u64`.
4345

4446
## v0.6.0
4547
- Implemented `UpdateEl` for `Filter` and `FilterMap`.

‎Cargo.toml

+1
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ members = [
102102
"examples/counter_advanced",
103103
"examples/canvas",
104104
"examples/drop_zone",
105+
"examples/graphql",
105106
"examples/markdown",
106107
"examples/fetch",
107108
"examples/mathjax",

‎examples/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ A demonstration of event-handlers attached to the `window`.
6767
## Server
6868
Backend server integration & interaction examples.
6969

70+
### [GraphQL](graphql)
71+
How to communicate with a GraphQL backend.
72+
7073
### [Integration](server_integration)
7174
Example of a workspace with [Actix](https://actix.rs/) server.
7275

‎examples/graphql/Cargo.toml

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
[package]
2+
name = "graphql"
3+
version = "0.1.0"
4+
authors = ["Martin Kavík <[email protected]>"]
5+
edition = "2018"
6+
7+
[lib]
8+
crate-type = ["cdylib"]
9+
10+
[dependencies]
11+
seed = {path = "../../"}
12+
wasm-bindgen = "0.2.59"
13+
graphql_client = "0.9.0"
14+
serde = "1.0.105"

‎examples/graphql/Makefile.toml

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
extend = "../../Makefile.toml"
2+
3+
# ---- BUILD ----
4+
5+
[tasks.build]
6+
alias = "default_build"
7+
8+
[tasks.build_release]
9+
alias = "default_build_release"
10+
11+
# ---- START ----
12+
13+
[tasks.start]
14+
alias = "default_start"
15+
16+
[tasks.start_release]
17+
alias = "default_start_release"
18+
19+
# ---- LINT ----
20+
21+
[tasks.clippy]
22+
alias = "default_clippy"

‎examples/graphql/README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
## GraphQl example
2+
3+
How to communicate with a GraphQL backend.
4+
- GraphQL queries and schemas are typed and validated.
5+
- CSS framework Bulma is used for UI.
6+
7+
---
8+
9+
```bash
10+
cargo make start
11+
```
12+
13+
Open [127.0.0.1:8000](http://127.0.0.1:8000) in your browser.

‎examples/graphql/graphql/queries.graphql

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
query QContinents {
2+
continents {
3+
code
4+
name
5+
}
6+
}
7+
8+
query QContinent($code: String) {
9+
continent(code: $code) {
10+
countries {
11+
code
12+
name
13+
}
14+
}
15+
}
16+
17+
query QCountry($code: String) {
18+
country(code: $code) {
19+
code
20+
name
21+
native
22+
phone
23+
currency
24+
languages {
25+
name
26+
native
27+
rtl
28+
}
29+
states {
30+
name
31+
}
32+
}
33+
}

‎examples/graphql/graphql/schema.graphql

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
directive @cacheControl(
2+
maxAge: Int
3+
scope: CacheControlScope
4+
) on FIELD_DEFINITION | OBJECT | INTERFACE
5+
enum CacheControlScope {
6+
PUBLIC
7+
PRIVATE
8+
}
9+
10+
type Continent {
11+
code: String
12+
name: String
13+
countries: [Country]
14+
}
15+
16+
type Country {
17+
code: String
18+
name: String
19+
native: String
20+
phone: String
21+
continent: Continent
22+
currency: String
23+
languages: [Language]
24+
emoji: String
25+
emojiU: String
26+
states: [State]
27+
}
28+
29+
type Language {
30+
code: String
31+
name: String
32+
native: String
33+
rtl: Int
34+
}
35+
36+
type Query {
37+
continents: [Continent]
38+
continent(code: String): Continent
39+
countries: [Country]
40+
country(code: String): Country
41+
languages: [Language]
42+
language(code: String): Language
43+
}
44+
45+
type State {
46+
code: String
47+
name: String
48+
country: Country
49+
}
50+
51+
scalar Upload
52+

‎examples/graphql/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
10+
<meta name="description" content="" />
11+
12+
<link rel="icon" type="image/png" href="/public/favicon.png" />
13+
14+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
15+
16+
<title>GraphQL example</title>
17+
18+
<!-- Because of Edge, see https://github.com/samthor/fast-text-encoding -->
19+
<script type="text/javascript" src="/public/text-polyfill.min.js"></script>
20+
</head>
21+
<body>
22+
<section id="app" class="section" style="max-height: 100vh;"></section>
23+
<script type="module">
24+
// https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html
25+
import init from '/pkg/package.js';
26+
init('/pkg/package_bg.wasm');
27+
</script>
28+
</body>
29+
</html>

‎examples/graphql/public/text-polyfill.min.js

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)