graphiti 2.0.0.beta.2 → 2.0.0.beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.github/workflows/ci.yml +30 -86
- data/.github/workflows/docs.yml +60 -0
- data/.github/workflows/release.yml +8 -8
- data/.gitignore +7 -0
- data/.npmrc +9 -0
- data/.standard.yml +4 -1
- data/Appraisals +33 -32
- data/CHANGELOG.md +41 -0
- data/README.md +13 -2
- data/UPGRADING.md +2 -68
- data/docs/concepts/backends-and-models.md +122 -0
- data/docs/concepts/endpoints.md +183 -0
- data/docs/concepts/links.md +212 -0
- data/docs/concepts/overview.md +80 -0
- data/docs/concepts/persisting.md +376 -0
- data/docs/concepts/relationships.md +527 -0
- data/docs/concepts/resources.md +677 -0
- data/docs/getting-started/first-api.md +289 -0
- data/docs/getting-started/installation.md +185 -0
- data/docs/intro.md +307 -0
- data/docs/js/authentication.md +63 -0
- data/docs/js/ddau.md +20 -0
- data/docs/js/extra-params.md +41 -0
- data/docs/js/index.md +112 -0
- data/docs/js/installation.md +120 -0
- data/docs/js/middleware.md +72 -0
- data/docs/js/models.md +202 -0
- data/docs/js/reads.md +494 -0
- data/docs/js/state-syncing.md +100 -0
- data/docs/js/writes.md +373 -0
- data/docs/reference/vandal.md +63 -0
- data/docs/reference/why.md +13 -0
- data/docs/topics/authorization.md +155 -0
- data/docs/topics/caching.md +55 -0
- data/docs/topics/customizing-sideloads.md +156 -0
- data/docs/topics/debugging.md +216 -0
- data/docs/topics/error-handling.md +210 -0
- data/docs/topics/etags.md +46 -0
- data/docs/topics/hopping-relationships.md +149 -0
- data/docs/topics/json-attributes.md +77 -0
- data/docs/topics/openstruct-models.md +50 -0
- data/docs/topics/remote-resources.md +291 -0
- data/docs/topics/testing.md +894 -0
- data/docs/topics/without-activerecord.md +324 -0
- data/docs/tutorial/index.md +58 -0
- data/docs/tutorial/step_0.md +107 -0
- data/docs/tutorial/step_1.md +199 -0
- data/docs/tutorial/step_2.md +312 -0
- data/docs/tutorial/step_3.md +142 -0
- data/docs/tutorial/step_4.md +135 -0
- data/docs/tutorial/step_5.md +69 -0
- data/docs/tutorial/step_6.md +82 -0
- data/docs/tutorial/step_7.md +205 -0
- data/docs/tutorial/step_8.md +128 -0
- data/docs/tutorial/step_9.md +171 -0
- data/docs/upgrading.md +265 -0
- data/gemfiles/rails_7_1.gemfile +4 -3
- data/gemfiles/{rails_7_2_graphiti_rails.gemfile → rails_7_2.gemfile} +3 -3
- data/gemfiles/{rails_8_1_graphiti_rails.gemfile → rails_8_0.gemfile} +3 -3
- data/gemfiles/{rails_8_0_graphiti_rails.gemfile → rails_8_1.gemfile} +3 -3
- data/graphiti.gemspec +7 -5
- data/{deprecated_generators → lib/generators}/graphiti/api_test_generator.rb +7 -1
- data/{deprecated_generators → lib/generators}/graphiti/generator_mixin.rb +14 -1
- data/{deprecated_generators → lib/generators}/graphiti/install_generator.rb +19 -13
- data/{deprecated_generators → lib/generators}/graphiti/resource_generator.rb +43 -6
- data/{deprecated_generators → lib/generators}/graphiti/templates/index_request_spec.rb.erb +1 -1
- data/{deprecated_generators → lib/generators}/graphiti/templates/resource_reads_spec.rb.erb +6 -6
- data/{deprecated_generators → lib/generators}/graphiti/templates/show_request_spec.rb.erb +1 -1
- data/lib/graphiti/configuration.rb +2 -2
- data/lib/graphiti/error_serializers/conflict_request.rb +19 -0
- data/lib/graphiti/error_serializers/deprecated_constants.rb +48 -0
- data/lib/graphiti/error_serializers/invalid_request.rb +56 -0
- data/lib/graphiti/error_serializers/validation.rb +143 -0
- data/lib/graphiti/errors.rb +4 -23
- data/lib/graphiti/query.rb +1 -1
- data/lib/graphiti/rails/context.rb +33 -0
- data/lib/graphiti/rails/controller.rb +41 -0
- data/lib/graphiti/rails/debugging.rb +18 -0
- data/lib/graphiti/rails/exception_handlers.rb +77 -0
- data/lib/graphiti/rails/railtie.rb +139 -0
- data/lib/graphiti/rails/responders.rb +21 -0
- data/lib/graphiti/rails/test_helpers.rb +22 -0
- data/lib/graphiti/rails.rb +47 -29
- data/lib/graphiti/resource/configuration.rb +1 -0
- data/lib/graphiti/resource/interface.rb +2 -2
- data/lib/graphiti/resource/persistence.rb +14 -2
- data/lib/graphiti/resource/remote.rb +2 -2
- data/lib/graphiti/resource/sideloading.rb +1 -1
- data/lib/graphiti/resource.rb +13 -1
- data/lib/graphiti/responders.rb +7 -20
- data/lib/graphiti/schema.rb +5 -1
- data/lib/graphiti/schema_diff.rb +4 -0
- data/lib/graphiti/scope.rb +45 -37
- data/lib/graphiti/serializer.rb +6 -0
- data/lib/graphiti/sideload/belongs_to.rb +38 -5
- data/lib/graphiti/sideload/polymorphic_belongs_to.rb +27 -23
- data/lib/graphiti/sideload.rb +54 -35
- data/lib/graphiti/spec_helpers/errors.rb +73 -0
- data/lib/graphiti/spec_helpers/errors_proxy.rb +75 -0
- data/lib/graphiti/spec_helpers/helpers.rb +107 -0
- data/lib/graphiti/spec_helpers/node.rb +88 -0
- data/lib/graphiti/spec_helpers/rspec.rb +147 -0
- data/lib/graphiti/spec_helpers.rb +53 -0
- data/lib/graphiti/util/include_params.rb +2 -2
- data/lib/graphiti/util/persistence.rb +10 -11
- data/lib/graphiti/util/serializer_relationships.rb +41 -5
- data/lib/graphiti/version.rb +1 -1
- data/lib/graphiti-rails.rb +11 -0
- data/lib/graphiti.rb +34 -10
- data/lib/graphiti_errors.rb +11 -0
- data/lib/graphiti_spec_helpers/rspec.rb +3 -0
- data/lib/graphiti_spec_helpers.rb +11 -0
- data/lib/{graphiti/deprecated_tasks.rb → tasks/graphiti.rake} +6 -1
- data/package-lock.json +6199 -0
- data/package.json +5 -4
- data/website/.gitignore +20 -0
- data/website/README.md +43 -0
- data/website/docusaurus.config.js +141 -0
- data/website/package-lock.json +19474 -0
- data/website/package.json +46 -0
- data/website/sidebars.js +82 -0
- data/website/src/css/custom.css +58 -0
- data/website/src/pages/markdown-page.mdx +7 -0
- data/website/static/.nojekyll +0 -0
- data/website/static/1.13/2019/03/31/graphiti-1-0.html +205 -0
- data/website/static/1.13/2019/05/08/graphiti-1-1.html +212 -0
- data/website/static/1.13/2019/05/20/graphiti-1-2.html +214 -0
- data/website/static/1.13/2019/10/14/tutorial.html +198 -0
- data/website/static/1.13/CNAME +1 -0
- data/website/static/1.13/README.md +16 -0
- data/website/static/1.13/assets/css/syntax.css +60 -0
- data/website/static/1.13/assets/favicons/android-chrome-192x192.png +0 -0
- data/website/static/1.13/assets/favicons/android-chrome-256x256.png +0 -0
- data/website/static/1.13/assets/favicons/apple-touch-icon.png +0 -0
- data/website/static/1.13/assets/favicons/browserconfig.xml +9 -0
- data/website/static/1.13/assets/favicons/favicon-16x16.png +0 -0
- data/website/static/1.13/assets/favicons/favicon-32x32.png +0 -0
- data/website/static/1.13/assets/favicons/favicon.ico +0 -0
- data/website/static/1.13/assets/favicons/mstile-150x150.png +0 -0
- data/website/static/1.13/assets/favicons/safari-pinned-tab.svg +1 -0
- data/website/static/1.13/assets/favicons/site.webmanifest +19 -0
- data/website/static/1.13/assets/img/backend.gif +0 -0
- data/website/static/1.13/assets/img/conformity.png +0 -0
- data/website/static/1.13/assets/img/error_payload.png +0 -0
- data/website/static/1.13/assets/img/gh.png +0 -0
- data/website/static/1.13/assets/img/lifecycle.gif +0 -0
- data/website/static/1.13/assets/img/logo-500.png +0 -0
- data/website/static/1.13/assets/img/logo.png +0 -0
- data/website/static/1.13/assets/img/love-graffiti.jpg +0 -0
- data/website/static/1.13/assets/img/meta_total_count.png +0 -0
- data/website/static/1.13/assets/img/persist.jpg +0 -0
- data/website/static/1.13/assets/img/resource.gif +0 -0
- data/website/static/1.13/assets/img/rest-graffiti.jpg +0 -0
- data/website/static/1.13/assets/img/rest1.gif +0 -0
- data/website/static/1.13/assets/img/rest2.gif +0 -0
- data/website/static/1.13/assets/img/rest3.gif +0 -0
- data/website/static/1.13/assets/img/rethink-rest-graffiti.jpg +0 -0
- data/website/static/1.13/assets/img/why.png +0 -0
- data/website/static/1.13/assets/js/highlight.pack.js +2 -0
- data/website/static/1.13/assets/main.css +15518 -0
- data/website/static/1.13/assets/main.css.map +1 -0
- data/website/static/1.13/bin/bundle +109 -0
- data/website/static/1.13/bin/jekyll +27 -0
- data/website/static/1.13/bin/kramdown +27 -0
- data/website/static/1.13/bin/listen +27 -0
- data/website/static/1.13/bin/rake +27 -0
- data/website/static/1.13/bin/rougify +27 -0
- data/website/static/1.13/bin/safe_yaml +27 -0
- data/website/static/1.13/bin/sass +27 -0
- data/website/static/1.13/bin/sass-convert +27 -0
- data/website/static/1.13/bin/scss +27 -0
- data/website/static/1.13/blog.html +259 -0
- data/website/static/1.13/cheatsheet.html +316 -0
- data/website/static/1.13/cookbooks/authorization.md +0 -0
- data/website/static/1.13/cookbooks/caching.md +0 -0
- data/website/static/1.13/cookbooks/customizing-sideloads.html +325 -0
- data/website/static/1.13/cookbooks/etags.md +0 -0
- data/website/static/1.13/cookbooks/hopping-relationships.html +324 -0
- data/website/static/1.13/cookbooks/json_attributes.md +0 -0
- data/website/static/1.13/cookbooks/openstruct-models.md +0 -0
- data/website/static/1.13/cookbooks/remote-resources.md +0 -0
- data/website/static/1.13/cookbooks/without-activerecord.html +510 -0
- data/website/static/1.13/features.html +249 -0
- data/website/static/1.13/feed.xml +106 -0
- data/website/static/1.13/guides/concepts/backends-and-models.html +467 -0
- data/website/static/1.13/guides/concepts/debugging.html +440 -0
- data/website/static/1.13/guides/concepts/endpoints.html +432 -0
- data/website/static/1.13/guides/concepts/error-handling.html +396 -0
- data/website/static/1.13/guides/concepts/links.html +501 -0
- data/website/static/1.13/guides/concepts/remote-resources.html +536 -0
- data/website/static/1.13/guides/concepts/resources.html +2176 -0
- data/website/static/1.13/guides/concepts/testing.html +1469 -0
- data/website/static/1.13/guides/getting-started/installation.html +420 -0
- data/website/static/1.13/guides/graphiti-rails-migration.html +242 -0
- data/website/static/1.13/guides/index.html +269 -0
- data/website/static/1.13/guides/overview.html +325 -0
- data/website/static/1.13/guides/upgrading-2-0.html +193 -0
- data/website/static/1.13/guides/upgrading.html +314 -0
- data/website/static/1.13/guides/vandal.html +282 -0
- data/website/static/1.13/guides/why.html +1121 -0
- data/website/static/1.13/index.html +72 -0
- data/website/static/1.13/js/authentication.html +295 -0
- data/website/static/1.13/js/ddau.html +238 -0
- data/website/static/1.13/js/extra-params.html +270 -0
- data/website/static/1.13/js/index.html +321 -0
- data/website/static/1.13/js/installation.html +637 -0
- data/website/static/1.13/js/introduction.html +257 -0
- data/website/static/1.13/js/middleware.html +318 -0
- data/website/static/1.13/js/reads/fieldsets.html +271 -0
- data/website/static/1.13/js/reads/filtering.html +289 -0
- data/website/static/1.13/js/reads/includes.html +260 -0
- data/website/static/1.13/js/reads/index.html +497 -0
- data/website/static/1.13/js/reads/nested-queries.html +353 -0
- data/website/static/1.13/js/reads/pagination.html +260 -0
- data/website/static/1.13/js/reads/sorting.html +265 -0
- data/website/static/1.13/js/reads/statistics.html +289 -0
- data/website/static/1.13/js/state-syncing.html +340 -0
- data/website/static/1.13/js/writes/deferred.html +296 -0
- data/website/static/1.13/js/writes/dirty-tracking.html +399 -0
- data/website/static/1.13/js/writes/index.html +391 -0
- data/website/static/1.13/js/writes/nested.html +330 -0
- data/website/static/1.13/js/writes/validations.html +272 -0
- data/website/static/1.13/quickstart.html +660 -0
- data/website/static/1.13/template +161 -0
- data/website/static/1.13/tutorial/index.html +250 -0
- data/website/static/1.13/tutorial/step_0.html +292 -0
- data/website/static/1.13/tutorial/step_1.html +517 -0
- data/website/static/1.13/tutorial/step_2.html +481 -0
- data/website/static/1.13/tutorial/step_3.html +323 -0
- data/website/static/1.13/tutorial/step_4.html +318 -0
- data/website/static/1.13/tutorial/step_5.html +265 -0
- data/website/static/1.13/tutorial/step_6.html +276 -0
- data/website/static/1.13/tutorial/step_7.html +390 -0
- data/website/static/1.13/tutorial/step_8.html +316 -0
- data/website/static/1.13/tutorial/step_9.html +365 -0
- data/website/static/assets/img/error_payload.png +0 -0
- data/website/static/assets/img/legacy/legacy-0378a3bb39.png +0 -0
- data/website/static/assets/img/legacy/legacy-05bbd3e5fd.png +0 -0
- data/website/static/assets/img/legacy/legacy-07aa104495.png +0 -0
- data/website/static/assets/img/legacy/legacy-0c75a16b3a.gif +0 -0
- data/website/static/assets/img/legacy/legacy-3076df6209.png +0 -0
- data/website/static/assets/img/legacy/legacy-7f6889bc89.png +0 -0
- data/website/static/assets/img/legacy/legacy-a2cc4363c3.png +0 -0
- data/website/static/assets/img/legacy/legacy-f67cfa89ab.png +0 -0
- data/website/static/assets/img/meta_total_count.png +0 -0
- data/website/static/img/docusaurus-social-card.jpg +0 -0
- data/website/static/img/docusaurus.png +0 -0
- data/website/static/img/favicon.ico +0 -0
- data/website/static/img/logo.png +0 -0
- data/website/static/img/logo.svg +1 -0
- data/website/static/img/undraw_docusaurus_mountain.svg +171 -0
- data/website/static/img/undraw_docusaurus_react.svg +170 -0
- data/website/static/img/undraw_docusaurus_tree.svg +40 -0
- metadata +245 -46
- data/gemfiles/rails_6.gemfile +0 -18
- data/gemfiles/rails_6_graphiti_rails.gemfile +0 -19
- data/gemfiles/rails_7.gemfile +0 -18
- data/gemfiles/rails_7_1_graphiti_rails.gemfile +0 -19
- data/gemfiles/rails_7_graphiti_rails.gemfile +0 -19
- data/lib/graphiti/railtie.rb +0 -121
- /data/{deprecated_generators → lib/generators}/graphiti/resource_test_generator.rb +0 -0
- /data/{deprecated_generators → lib/generators}/graphiti/templates/application_resource.rb.erb +0 -0
- /data/{deprecated_generators → lib/generators}/graphiti/templates/controller.rb.erb +0 -0
- /data/{deprecated_generators → lib/generators}/graphiti/templates/create_request_spec.rb.erb +0 -0
- /data/{deprecated_generators → lib/generators}/graphiti/templates/destroy_request_spec.rb.erb +0 -0
- /data/{deprecated_generators → lib/generators}/graphiti/templates/resource.rb.erb +0 -0
- /data/{deprecated_generators → lib/generators}/graphiti/templates/resource_writes_spec.rb.erb +0 -0
- /data/{deprecated_generators → lib/generators}/graphiti/templates/update_request_spec.rb.erb +0 -0
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
|
|
9
|
+
<link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
|
|
10
|
+
|
|
11
|
+
<link rel="apple-touch-icon" sizes="180x180" href="/1.13/assets/favicons/apple-touch-icon.png">
|
|
12
|
+
<link rel="icon" type="image/png" sizes="32x32" href="/1.13/assets/favicons/favicon-32x32.png">
|
|
13
|
+
<link rel="icon" type="image/png" sizes="16x16" href="/1.13/assets/favicons/favicon-16x16.png">
|
|
14
|
+
<link rel="manifest" href="/1.13/assets/favicons/site.webmanifest">
|
|
15
|
+
<link rel="mask-icon" href="/1.13/assets/favicons/safari-pinned-tab.svg" color="#F86DA7">
|
|
16
|
+
<link rel="shortcut icon" href="/1.13/assets/favicons/favicon.ico">
|
|
17
|
+
<meta name="msapplication-TileColor" content="#F86DA7">
|
|
18
|
+
<meta name="msapplication-config" content="/1.13/assets/favicons/browserconfig.xml">
|
|
19
|
+
<meta name="theme-color" content="#F86DA7">
|
|
20
|
+
|
|
21
|
+
<title>Graphiti</title>
|
|
22
|
+
<meta name="description" content="Stylish Graph APIs">
|
|
23
|
+
|
|
24
|
+
<link rel="stylesheet" href="/1.13/assets/main.css?ref=wh4t3v45">
|
|
25
|
+
<link rel="alternate" type="application/rss+xml" title="Graphiti" href="/1.13/feed.xml">
|
|
26
|
+
|
|
27
|
+
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
28
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-127904727-1"></script>
|
|
29
|
+
<script>
|
|
30
|
+
window.dataLayer = window.dataLayer || [];
|
|
31
|
+
function gtag(){dataLayer.push(arguments);}
|
|
32
|
+
gtag('js', new Date());
|
|
33
|
+
|
|
34
|
+
gtag('config', 'UA-127904727-1');
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<!-- javascript -->
|
|
38
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
39
|
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
</head>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<body class="layout-home">
|
|
46
|
+
<main class="page-content" aria-label="Content">
|
|
47
|
+
<div class="wrapper">
|
|
48
|
+
<script>
|
|
49
|
+
window.location.href = '/1.13/guides/'
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<div style="text-align:center" class="container">
|
|
53
|
+
<div class="holder">
|
|
54
|
+
<a href="/1.13/guides">
|
|
55
|
+
<img class="logo" src="/1.13/assets/img/logo-500.png" />
|
|
56
|
+
<h1>Stylish Graph APIs</h1>
|
|
57
|
+
</a>
|
|
58
|
+
|
|
59
|
+
<iframe style="margin-top: 50px; margin-bottom: 50px; margin-left: -30px;" width="560" height="315" src="https://www.youtube.com/embed/_QqXjZDzTf4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
60
|
+
|
|
61
|
+
<p style="color:white;font-size:22px">
|
|
62
|
+
RESTful APIs for a GraphQL era.
|
|
63
|
+
|
|
64
|
+
<a href="/1.13/guides/why">But Why?</a>
|
|
65
|
+
</p>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
</div>
|
|
70
|
+
</main>
|
|
71
|
+
</body>
|
|
72
|
+
</html>
|
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
|
|
9
|
+
<link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
|
|
10
|
+
|
|
11
|
+
<link rel="apple-touch-icon" sizes="180x180" href="/1.13/assets/favicons/apple-touch-icon.png">
|
|
12
|
+
<link rel="icon" type="image/png" sizes="32x32" href="/1.13/assets/favicons/favicon-32x32.png">
|
|
13
|
+
<link rel="icon" type="image/png" sizes="16x16" href="/1.13/assets/favicons/favicon-16x16.png">
|
|
14
|
+
<link rel="manifest" href="/1.13/assets/favicons/site.webmanifest">
|
|
15
|
+
<link rel="mask-icon" href="/1.13/assets/favicons/safari-pinned-tab.svg" color="#F86DA7">
|
|
16
|
+
<link rel="shortcut icon" href="/1.13/assets/favicons/favicon.ico">
|
|
17
|
+
<meta name="msapplication-TileColor" content="#F86DA7">
|
|
18
|
+
<meta name="msapplication-config" content="/1.13/assets/favicons/browserconfig.xml">
|
|
19
|
+
<meta name="theme-color" content="#F86DA7">
|
|
20
|
+
|
|
21
|
+
<title>Graphiti</title>
|
|
22
|
+
<meta name="description" content="Stylish Graph APIs">
|
|
23
|
+
|
|
24
|
+
<link rel="stylesheet" href="/1.13/assets/main.css?ref=wh4t3v45">
|
|
25
|
+
<link rel="alternate" type="application/rss+xml" title="Graphiti" href="/1.13/feed.xml">
|
|
26
|
+
|
|
27
|
+
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
28
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-127904727-1"></script>
|
|
29
|
+
<script>
|
|
30
|
+
window.dataLayer = window.dataLayer || [];
|
|
31
|
+
function gtag(){dataLayer.push(arguments);}
|
|
32
|
+
gtag('js', new Date());
|
|
33
|
+
|
|
34
|
+
gtag('config', 'UA-127904727-1');
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<!-- javascript -->
|
|
38
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
39
|
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
</head>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<body>
|
|
46
|
+
<main class="page-content" aria-label="Content">
|
|
47
|
+
<div class="wrapper">
|
|
48
|
+
<header class="navbar navbar-inverse normal" role="banner">
|
|
49
|
+
<div class="container">
|
|
50
|
+
<div class="navbar-header">
|
|
51
|
+
<a href="/1.13/1.13" class="navbar-brand">
|
|
52
|
+
<img alt="logo" src="/1.13/assets/img/logo.png">
|
|
53
|
+
</a>
|
|
54
|
+
</div>
|
|
55
|
+
<nav class="" role="navigation">
|
|
56
|
+
<ul class="nav navbar-nav nav-links">
|
|
57
|
+
<li>
|
|
58
|
+
<a class="quickstart nav-link" href="/1.13/quickstart">Quickstart</a>
|
|
59
|
+
</li>
|
|
60
|
+
<li>
|
|
61
|
+
<a class="guides nav-link" href="/1.13/guides">Guides</a>
|
|
62
|
+
</li>
|
|
63
|
+
<li>
|
|
64
|
+
<a class="tutorial nav-link" href="/1.13/tutorial">Tutorial</a>
|
|
65
|
+
</li>
|
|
66
|
+
<li>
|
|
67
|
+
<a class="spraypaint nav-link" href="/1.13/js">Spraypaint</a>
|
|
68
|
+
</li>
|
|
69
|
+
</ul>
|
|
70
|
+
<ul class="nav gh navbar-nav navbar-right visible-lg visible-md">
|
|
71
|
+
<li>
|
|
72
|
+
<span class="star">⭐</span>
|
|
73
|
+
<a href="https://github.com/graphiti-api/graphiti">
|
|
74
|
+
<img alt="github-star" style="margin-right: 65px;margin-top: -20px" src="/1.13/assets/img/gh.png">
|
|
75
|
+
</a>
|
|
76
|
+
</li>
|
|
77
|
+
</ul>
|
|
78
|
+
</nav>
|
|
79
|
+
</div>
|
|
80
|
+
</header>
|
|
81
|
+
|
|
82
|
+
<div class="container">
|
|
83
|
+
<h1>
|
|
84
|
+
Spraypaint
|
|
85
|
+
<small>the isomorphic, framework-agnostic Graphiti ORM</small>
|
|
86
|
+
</h1>
|
|
87
|
+
|
|
88
|
+
<div class="js-toc col-md-3">
|
|
89
|
+
<ul>
|
|
90
|
+
<li><a href="/1.13/js/index">Home</a></li>
|
|
91
|
+
<li><a href="/1.13/js/introduction">Introduction</a></li>
|
|
92
|
+
<li><a href="/1.13/js/installation">Installation</a>
|
|
93
|
+
<ul>
|
|
94
|
+
<li><a href="/1.13/js/installation#typescript">Typescript</a></li>
|
|
95
|
+
<li><a href="/1.13/js/installation#defining-models">Defining Models</a></li>
|
|
96
|
+
<li><a href="/1.13/js/installation#connecting-to-the-api">Connecting to the API</a></li>
|
|
97
|
+
<li><a href="/1.13/js/installation#defining-attributes">Defining Attributes</a></li>
|
|
98
|
+
<li><a href="/1.13/js/installation#defining-relationships">Defining Relationships</a></li>
|
|
99
|
+
</ul>
|
|
100
|
+
</li>
|
|
101
|
+
<li><a href="/1.13/js/reads">Reads</a>
|
|
102
|
+
<ul>
|
|
103
|
+
<li><a href="/1.13/js/reads/sorting">Sorting</a></li>
|
|
104
|
+
<li><a href="/1.13/js/reads/pagination">Pagination</a></li>
|
|
105
|
+
<li><a href="/1.13/js/reads/filtering">Filtering</a></li>
|
|
106
|
+
<li><a href="/1.13/js/reads/fieldsets">Fieldsets</a></li>
|
|
107
|
+
<li><a href="/1.13/js/reads/statistics">Statistics</a></li>
|
|
108
|
+
<li><a href="/1.13/js/reads/includes">Includes</a></li>
|
|
109
|
+
<li><a href="/1.13/js/reads/nested-queries">Nested Queries</a></li>
|
|
110
|
+
</ul>
|
|
111
|
+
</li>
|
|
112
|
+
<li><a href="/1.13/js/writes">Writes</a>
|
|
113
|
+
<ul>
|
|
114
|
+
<li><a href="/1.13/js/writes/validations">Validations</a></li>
|
|
115
|
+
<li><a href="/1.13/js/writes/dirty-tracking">Dirty Tracking</a></li>
|
|
116
|
+
<li><a href="/1.13/js/writes/nested">Nested Writes</a></li>
|
|
117
|
+
<li><a href="/1.13/js/writes/deferred">Deferred Action</a></li>
|
|
118
|
+
</ul>
|
|
119
|
+
</li>
|
|
120
|
+
<li><a href="/1.13/js/middleware">Middleware</a></li>
|
|
121
|
+
<li><a href="/1.13/js/authentication">Authentication</a></li>
|
|
122
|
+
<li><a href="/1.13/js/state-syncing">State Syncing</a></li>
|
|
123
|
+
<li><a href="/1.13/js/ddau">Data Down, Actions Up</a></li>
|
|
124
|
+
<li><a href="/1.13/js/extra-params">Extra params</a></li>
|
|
125
|
+
</ul>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div class="col-md-8 col-md-offset-1">
|
|
129
|
+
<h3 id="authentication">Authentication</h3>
|
|
130
|
+
|
|
131
|
+
<p>Spraypaint supports <a href="https://jwt.io/introduction">JSON Web Tokens</a>. These can
|
|
132
|
+
be set manually, or automatically fetched from <code class="language-plaintext highlighter-rouge">localStorage</code>.</p>
|
|
133
|
+
|
|
134
|
+
<p>To set manually:</p>
|
|
135
|
+
|
|
136
|
+
<figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="nx">ApplicationRecord</span><span class="p">.</span><span class="nx">jwt</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">myt0k3n</span><span class="dl">'</span></code></pre></figure>
|
|
137
|
+
|
|
138
|
+
<blockquote>
|
|
139
|
+
<p>All requests will now send the header:<br />
|
|
140
|
+
<code class="language-plaintext highlighter-rouge">Authorization: Token token="myt0k3n"</code>.</p>
|
|
141
|
+
</blockquote>
|
|
142
|
+
|
|
143
|
+
<p>To set via <code class="language-plaintext highlighter-rouge">localStorage</code>, simply store the token with a key of <code class="language-plaintext highlighter-rouge">jwt</code>
|
|
144
|
+
and it will be set automatically. To customize the <code class="language-plaintext highlighter-rouge">localStorage</code> key:</p>
|
|
145
|
+
|
|
146
|
+
<figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="nx">ApplicationRecord</span><span class="p">.</span><span class="nx">jwtStorage</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">authtoken</span><span class="dl">"</span></code></pre></figure>
|
|
147
|
+
|
|
148
|
+
<p>…or to opt-out of <code class="language-plaintext highlighter-rouge">localStorage</code> altogether:</p>
|
|
149
|
+
|
|
150
|
+
<figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="nx">ApplicationRecord</span><span class="p">.</span><span class="nx">jwtStorage</span> <span class="o">=</span> <span class="kc">false</span></code></pre></figure>
|
|
151
|
+
|
|
152
|
+
<p>You can control the format of the header that is sent to the
|
|
153
|
+
server:</p>
|
|
154
|
+
|
|
155
|
+
<div class="tabs">
|
|
156
|
+
<div class="tab typescript active">
|
|
157
|
+
<span>Typescript</span>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="tab javascript">
|
|
160
|
+
<span>Javascript</span>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="code-tabs">
|
|
165
|
+
|
|
166
|
+
<figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"> <span class="kd">class</span> <span class="nc">ApplicationRecord</span> <span class="kd">extends</span> <span class="nc">SpraypaintBase</span> <span class="p">{</span>
|
|
167
|
+
<span class="c1">// ... code ...</span>
|
|
168
|
+
<span class="k">static</span> <span class="nf">generateAuthHeader</span><span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span>
|
|
169
|
+
<span class="k">return</span> <span class="s2">`Bearer </span><span class="p">${</span><span class="nx">token</span><span class="p">}</span><span class="s2">`</span>
|
|
170
|
+
<span class="p">}</span>
|
|
171
|
+
<span class="p">}</span>
|
|
172
|
+
</code></pre></figure>
|
|
173
|
+
|
|
174
|
+
<figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">ApplicationRecord</span> <span class="o">=</span> <span class="nx">SpraypaintBase</span><span class="p">.</span><span class="nf">extend</span><span class="p">({</span>
|
|
175
|
+
<span class="c1">// ... code ...</span>
|
|
176
|
+
<span class="na">static</span><span class="p">:</span> <span class="p">{</span>
|
|
177
|
+
<span class="na">generateAuthHeader</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">token</span><span class="p">)</span> <span class="p">{</span>
|
|
178
|
+
<span class="k">return</span> <span class="dl">"</span><span class="s2">Bearer </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">token</span><span class="p">;</span>
|
|
179
|
+
<span class="p">}</span>
|
|
180
|
+
<span class="p">}</span>
|
|
181
|
+
<span class="p">});</span>
|
|
182
|
+
</code></pre></figure>
|
|
183
|
+
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
<p>Finally, if your server returns a refreshed JWT within the <code class="language-plaintext highlighter-rouge">X-JWT</code>
|
|
187
|
+
header, it will be used in all subsequent requests (and <code class="language-plaintext highlighter-rouge">localStorage</code>
|
|
188
|
+
will be updated automatically if you’re using it).</p>
|
|
189
|
+
|
|
190
|
+
<div class="clearfix">
|
|
191
|
+
<h2 id="next">
|
|
192
|
+
<a href="/1.13/js/state-syncing">
|
|
193
|
+
NEXT:
|
|
194
|
+
<small>State Syncing</small>
|
|
195
|
+
»
|
|
196
|
+
</a>
|
|
197
|
+
</h2>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
</main>
|
|
204
|
+
<div class="main-footer main-footer--dark">
|
|
205
|
+
<div class="container">
|
|
206
|
+
<div class="row">
|
|
207
|
+
<div class="col-sm-4 menu">
|
|
208
|
+
<h3>Overview</h3>
|
|
209
|
+
<ul>
|
|
210
|
+
<li>
|
|
211
|
+
<a href="/1.13/quickstart">Quickstart</a>
|
|
212
|
+
</li>
|
|
213
|
+
<li>
|
|
214
|
+
<a href="/1.13/tutorial">Tutorial</a>
|
|
215
|
+
</li>
|
|
216
|
+
<li>
|
|
217
|
+
<a href="/1.13/guides">Guides</a>
|
|
218
|
+
</li>
|
|
219
|
+
</ul>
|
|
220
|
+
</div>
|
|
221
|
+
<div class="col-sm-4 menu">
|
|
222
|
+
<h3>Contact</h3>
|
|
223
|
+
<ul>
|
|
224
|
+
<li>
|
|
225
|
+
<a target="_blank" href="https://discord.gg/wgqkMBsSRV">Discord Chat</a>
|
|
226
|
+
</li>
|
|
227
|
+
<li>
|
|
228
|
+
<a href="mailto:richmolj@gmail.com">Email</a>
|
|
229
|
+
</li>
|
|
230
|
+
</ul>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="col-sm-4 menu">
|
|
233
|
+
<h3>Related</h3>
|
|
234
|
+
<ul>
|
|
235
|
+
<li>
|
|
236
|
+
<a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
|
|
237
|
+
</li>
|
|
238
|
+
<li>
|
|
239
|
+
<a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
|
|
240
|
+
</li>
|
|
241
|
+
<li>
|
|
242
|
+
<a target="_blank" href="https://vuejs.org/">VueJS</a>
|
|
243
|
+
</li>
|
|
244
|
+
</ul>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
<script type="text/javascript">
|
|
251
|
+
$(function () {
|
|
252
|
+
|
|
253
|
+
var flipTabs = function() {
|
|
254
|
+
var isTS = true;
|
|
255
|
+
if (localStorage.getItem('js-lang') === 'javascript') {
|
|
256
|
+
isTS = false;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
$('.code-tabs').each(function(index, el) {
|
|
260
|
+
if (isTS) {
|
|
261
|
+
console.log('hiding js');
|
|
262
|
+
$($(el).children()[1]).hide();
|
|
263
|
+
$($(el).children()[0]).show();
|
|
264
|
+
} else {
|
|
265
|
+
console.log('hiding ts');
|
|
266
|
+
$($(el).children()[0]).hide();
|
|
267
|
+
$($(el).children()[1]).show();
|
|
268
|
+
}
|
|
269
|
+
});
|
|
270
|
+
|
|
271
|
+
if (isTS) {
|
|
272
|
+
$('.tab.typescript').addClass('active');
|
|
273
|
+
$('.tab.javascript').removeClass('active');
|
|
274
|
+
} else {
|
|
275
|
+
$('.tab.typescript').removeClass('active');
|
|
276
|
+
$('.tab.javascript').addClass('active');
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
$('.tab').click(function() {
|
|
281
|
+
if ($(this).hasClass('typescript')) {
|
|
282
|
+
localStorage.setItem('js-lang', 'typescript');
|
|
283
|
+
} else {
|
|
284
|
+
localStorage.setItem('js-lang', 'javascript');
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
flipTabs();
|
|
288
|
+
});
|
|
289
|
+
|
|
290
|
+
flipTabs();
|
|
291
|
+
})
|
|
292
|
+
</script>
|
|
293
|
+
|
|
294
|
+
</body>
|
|
295
|
+
</html>
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
|
|
9
|
+
<link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
|
|
10
|
+
|
|
11
|
+
<link rel="apple-touch-icon" sizes="180x180" href="/1.13/assets/favicons/apple-touch-icon.png">
|
|
12
|
+
<link rel="icon" type="image/png" sizes="32x32" href="/1.13/assets/favicons/favicon-32x32.png">
|
|
13
|
+
<link rel="icon" type="image/png" sizes="16x16" href="/1.13/assets/favicons/favicon-16x16.png">
|
|
14
|
+
<link rel="manifest" href="/1.13/assets/favicons/site.webmanifest">
|
|
15
|
+
<link rel="mask-icon" href="/1.13/assets/favicons/safari-pinned-tab.svg" color="#F86DA7">
|
|
16
|
+
<link rel="shortcut icon" href="/1.13/assets/favicons/favicon.ico">
|
|
17
|
+
<meta name="msapplication-TileColor" content="#F86DA7">
|
|
18
|
+
<meta name="msapplication-config" content="/1.13/assets/favicons/browserconfig.xml">
|
|
19
|
+
<meta name="theme-color" content="#F86DA7">
|
|
20
|
+
|
|
21
|
+
<title>Graphiti</title>
|
|
22
|
+
<meta name="description" content="Stylish Graph APIs">
|
|
23
|
+
|
|
24
|
+
<link rel="stylesheet" href="/1.13/assets/main.css?ref=wh4t3v45">
|
|
25
|
+
<link rel="alternate" type="application/rss+xml" title="Graphiti" href="/1.13/feed.xml">
|
|
26
|
+
|
|
27
|
+
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
28
|
+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-127904727-1"></script>
|
|
29
|
+
<script>
|
|
30
|
+
window.dataLayer = window.dataLayer || [];
|
|
31
|
+
function gtag(){dataLayer.push(arguments);}
|
|
32
|
+
gtag('js', new Date());
|
|
33
|
+
|
|
34
|
+
gtag('config', 'UA-127904727-1');
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<!-- javascript -->
|
|
38
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
39
|
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
</head>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<body>
|
|
46
|
+
<main class="page-content" aria-label="Content">
|
|
47
|
+
<div class="wrapper">
|
|
48
|
+
<header class="navbar navbar-inverse normal" role="banner">
|
|
49
|
+
<div class="container">
|
|
50
|
+
<div class="navbar-header">
|
|
51
|
+
<a href="/1.13/1.13" class="navbar-brand">
|
|
52
|
+
<img alt="logo" src="/1.13/assets/img/logo.png">
|
|
53
|
+
</a>
|
|
54
|
+
</div>
|
|
55
|
+
<nav class="" role="navigation">
|
|
56
|
+
<ul class="nav navbar-nav nav-links">
|
|
57
|
+
<li>
|
|
58
|
+
<a class="quickstart nav-link" href="/1.13/quickstart">Quickstart</a>
|
|
59
|
+
</li>
|
|
60
|
+
<li>
|
|
61
|
+
<a class="guides nav-link" href="/1.13/guides">Guides</a>
|
|
62
|
+
</li>
|
|
63
|
+
<li>
|
|
64
|
+
<a class="tutorial nav-link" href="/1.13/tutorial">Tutorial</a>
|
|
65
|
+
</li>
|
|
66
|
+
<li>
|
|
67
|
+
<a class="spraypaint nav-link" href="/1.13/js">Spraypaint</a>
|
|
68
|
+
</li>
|
|
69
|
+
</ul>
|
|
70
|
+
<ul class="nav gh navbar-nav navbar-right visible-lg visible-md">
|
|
71
|
+
<li>
|
|
72
|
+
<span class="star">⭐</span>
|
|
73
|
+
<a href="https://github.com/graphiti-api/graphiti">
|
|
74
|
+
<img alt="github-star" style="margin-right: 65px;margin-top: -20px" src="/1.13/assets/img/gh.png">
|
|
75
|
+
</a>
|
|
76
|
+
</li>
|
|
77
|
+
</ul>
|
|
78
|
+
</nav>
|
|
79
|
+
</div>
|
|
80
|
+
</header>
|
|
81
|
+
|
|
82
|
+
<div class="container">
|
|
83
|
+
<h1>
|
|
84
|
+
Spraypaint
|
|
85
|
+
<small>the isomorphic, framework-agnostic Graphiti ORM</small>
|
|
86
|
+
</h1>
|
|
87
|
+
|
|
88
|
+
<div class="js-toc col-md-3">
|
|
89
|
+
<ul>
|
|
90
|
+
<li><a href="/1.13/js/index">Home</a></li>
|
|
91
|
+
<li><a href="/1.13/js/introduction">Introduction</a></li>
|
|
92
|
+
<li><a href="/1.13/js/installation">Installation</a>
|
|
93
|
+
<ul>
|
|
94
|
+
<li><a href="/1.13/js/installation#typescript">Typescript</a></li>
|
|
95
|
+
<li><a href="/1.13/js/installation#defining-models">Defining Models</a></li>
|
|
96
|
+
<li><a href="/1.13/js/installation#connecting-to-the-api">Connecting to the API</a></li>
|
|
97
|
+
<li><a href="/1.13/js/installation#defining-attributes">Defining Attributes</a></li>
|
|
98
|
+
<li><a href="/1.13/js/installation#defining-relationships">Defining Relationships</a></li>
|
|
99
|
+
</ul>
|
|
100
|
+
</li>
|
|
101
|
+
<li><a href="/1.13/js/reads">Reads</a>
|
|
102
|
+
<ul>
|
|
103
|
+
<li><a href="/1.13/js/reads/sorting">Sorting</a></li>
|
|
104
|
+
<li><a href="/1.13/js/reads/pagination">Pagination</a></li>
|
|
105
|
+
<li><a href="/1.13/js/reads/filtering">Filtering</a></li>
|
|
106
|
+
<li><a href="/1.13/js/reads/fieldsets">Fieldsets</a></li>
|
|
107
|
+
<li><a href="/1.13/js/reads/statistics">Statistics</a></li>
|
|
108
|
+
<li><a href="/1.13/js/reads/includes">Includes</a></li>
|
|
109
|
+
<li><a href="/1.13/js/reads/nested-queries">Nested Queries</a></li>
|
|
110
|
+
</ul>
|
|
111
|
+
</li>
|
|
112
|
+
<li><a href="/1.13/js/writes">Writes</a>
|
|
113
|
+
<ul>
|
|
114
|
+
<li><a href="/1.13/js/writes/validations">Validations</a></li>
|
|
115
|
+
<li><a href="/1.13/js/writes/dirty-tracking">Dirty Tracking</a></li>
|
|
116
|
+
<li><a href="/1.13/js/writes/nested">Nested Writes</a></li>
|
|
117
|
+
<li><a href="/1.13/js/writes/deferred">Deferred Action</a></li>
|
|
118
|
+
</ul>
|
|
119
|
+
</li>
|
|
120
|
+
<li><a href="/1.13/js/middleware">Middleware</a></li>
|
|
121
|
+
<li><a href="/1.13/js/authentication">Authentication</a></li>
|
|
122
|
+
<li><a href="/1.13/js/state-syncing">State Syncing</a></li>
|
|
123
|
+
<li><a href="/1.13/js/ddau">Data Down, Actions Up</a></li>
|
|
124
|
+
<li><a href="/1.13/js/extra-params">Extra params</a></li>
|
|
125
|
+
</ul>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div class="col-md-8 col-md-offset-1">
|
|
129
|
+
<h3 id="data-down-actions-up">Data Down, Actions Up</h3>
|
|
130
|
+
|
|
131
|
+
<p>It’s a <a href="http://www.samselikoff.com/blog/data-down-actions-up">popular pattern</a> to pass data <strong>down</strong> to components, avoid modifying state within the component, and instead pass <strong>actions up</strong> to modify state. This can make complex applications easier to track and reason about, and you’ll see it in client-side frameworks from React to Ember.</p>
|
|
132
|
+
|
|
133
|
+
<p>To follow this pattern, use <code class="language-plaintext highlighter-rouge">#dup()</code> when passing down to your component:</p>
|
|
134
|
+
|
|
135
|
+
<figure class="highlight"><pre><code class="language-bash" data-lang="bash"><my-component <span class="nv">something</span><span class="o">=</span><span class="s2">"model.dup()"</span> /></code></pre></figure>
|
|
136
|
+
|
|
137
|
+
<p>This will create a new instance of the model with all the same state.
|
|
138
|
+
Avoid modifying this instance in your component and instead pass
|
|
139
|
+
<strong>actions up</strong>.</p>
|
|
140
|
+
|
|
141
|
+
<p>When opting-in to <a href="/1.13/js/state-syncing">state-syncing</a> these instances will sync-up whenever one of these is instances is persisted. You won’t have to worry about updating the child component when the parent instance is saved.</p>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</main>
|
|
147
|
+
<div class="main-footer main-footer--dark">
|
|
148
|
+
<div class="container">
|
|
149
|
+
<div class="row">
|
|
150
|
+
<div class="col-sm-4 menu">
|
|
151
|
+
<h3>Overview</h3>
|
|
152
|
+
<ul>
|
|
153
|
+
<li>
|
|
154
|
+
<a href="/1.13/quickstart">Quickstart</a>
|
|
155
|
+
</li>
|
|
156
|
+
<li>
|
|
157
|
+
<a href="/1.13/tutorial">Tutorial</a>
|
|
158
|
+
</li>
|
|
159
|
+
<li>
|
|
160
|
+
<a href="/1.13/guides">Guides</a>
|
|
161
|
+
</li>
|
|
162
|
+
</ul>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="col-sm-4 menu">
|
|
165
|
+
<h3>Contact</h3>
|
|
166
|
+
<ul>
|
|
167
|
+
<li>
|
|
168
|
+
<a target="_blank" href="https://discord.gg/wgqkMBsSRV">Discord Chat</a>
|
|
169
|
+
</li>
|
|
170
|
+
<li>
|
|
171
|
+
<a href="mailto:richmolj@gmail.com">Email</a>
|
|
172
|
+
</li>
|
|
173
|
+
</ul>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="col-sm-4 menu">
|
|
176
|
+
<h3>Related</h3>
|
|
177
|
+
<ul>
|
|
178
|
+
<li>
|
|
179
|
+
<a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
|
|
180
|
+
</li>
|
|
181
|
+
<li>
|
|
182
|
+
<a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
|
|
183
|
+
</li>
|
|
184
|
+
<li>
|
|
185
|
+
<a target="_blank" href="https://vuejs.org/">VueJS</a>
|
|
186
|
+
</li>
|
|
187
|
+
</ul>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
|
|
193
|
+
<script type="text/javascript">
|
|
194
|
+
$(function () {
|
|
195
|
+
|
|
196
|
+
var flipTabs = function() {
|
|
197
|
+
var isTS = true;
|
|
198
|
+
if (localStorage.getItem('js-lang') === 'javascript') {
|
|
199
|
+
isTS = false;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
$('.code-tabs').each(function(index, el) {
|
|
203
|
+
if (isTS) {
|
|
204
|
+
console.log('hiding js');
|
|
205
|
+
$($(el).children()[1]).hide();
|
|
206
|
+
$($(el).children()[0]).show();
|
|
207
|
+
} else {
|
|
208
|
+
console.log('hiding ts');
|
|
209
|
+
$($(el).children()[0]).hide();
|
|
210
|
+
$($(el).children()[1]).show();
|
|
211
|
+
}
|
|
212
|
+
});
|
|
213
|
+
|
|
214
|
+
if (isTS) {
|
|
215
|
+
$('.tab.typescript').addClass('active');
|
|
216
|
+
$('.tab.javascript').removeClass('active');
|
|
217
|
+
} else {
|
|
218
|
+
$('.tab.typescript').removeClass('active');
|
|
219
|
+
$('.tab.javascript').addClass('active');
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
$('.tab').click(function() {
|
|
224
|
+
if ($(this).hasClass('typescript')) {
|
|
225
|
+
localStorage.setItem('js-lang', 'typescript');
|
|
226
|
+
} else {
|
|
227
|
+
localStorage.setItem('js-lang', 'javascript');
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
flipTabs();
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
flipTabs();
|
|
234
|
+
})
|
|
235
|
+
</script>
|
|
236
|
+
|
|
237
|
+
</body>
|
|
238
|
+
</html>
|