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.
Files changed (269) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/ci.yml +30 -86
  3. data/.github/workflows/docs.yml +60 -0
  4. data/.github/workflows/release.yml +8 -8
  5. data/.gitignore +7 -0
  6. data/.npmrc +9 -0
  7. data/.standard.yml +4 -1
  8. data/Appraisals +33 -32
  9. data/CHANGELOG.md +41 -0
  10. data/README.md +13 -2
  11. data/UPGRADING.md +2 -68
  12. data/docs/concepts/backends-and-models.md +122 -0
  13. data/docs/concepts/endpoints.md +183 -0
  14. data/docs/concepts/links.md +212 -0
  15. data/docs/concepts/overview.md +80 -0
  16. data/docs/concepts/persisting.md +376 -0
  17. data/docs/concepts/relationships.md +527 -0
  18. data/docs/concepts/resources.md +677 -0
  19. data/docs/getting-started/first-api.md +289 -0
  20. data/docs/getting-started/installation.md +185 -0
  21. data/docs/intro.md +307 -0
  22. data/docs/js/authentication.md +63 -0
  23. data/docs/js/ddau.md +20 -0
  24. data/docs/js/extra-params.md +41 -0
  25. data/docs/js/index.md +112 -0
  26. data/docs/js/installation.md +120 -0
  27. data/docs/js/middleware.md +72 -0
  28. data/docs/js/models.md +202 -0
  29. data/docs/js/reads.md +494 -0
  30. data/docs/js/state-syncing.md +100 -0
  31. data/docs/js/writes.md +373 -0
  32. data/docs/reference/vandal.md +63 -0
  33. data/docs/reference/why.md +13 -0
  34. data/docs/topics/authorization.md +155 -0
  35. data/docs/topics/caching.md +55 -0
  36. data/docs/topics/customizing-sideloads.md +156 -0
  37. data/docs/topics/debugging.md +216 -0
  38. data/docs/topics/error-handling.md +210 -0
  39. data/docs/topics/etags.md +46 -0
  40. data/docs/topics/hopping-relationships.md +149 -0
  41. data/docs/topics/json-attributes.md +77 -0
  42. data/docs/topics/openstruct-models.md +50 -0
  43. data/docs/topics/remote-resources.md +291 -0
  44. data/docs/topics/testing.md +894 -0
  45. data/docs/topics/without-activerecord.md +324 -0
  46. data/docs/tutorial/index.md +58 -0
  47. data/docs/tutorial/step_0.md +107 -0
  48. data/docs/tutorial/step_1.md +199 -0
  49. data/docs/tutorial/step_2.md +312 -0
  50. data/docs/tutorial/step_3.md +142 -0
  51. data/docs/tutorial/step_4.md +135 -0
  52. data/docs/tutorial/step_5.md +69 -0
  53. data/docs/tutorial/step_6.md +82 -0
  54. data/docs/tutorial/step_7.md +205 -0
  55. data/docs/tutorial/step_8.md +128 -0
  56. data/docs/tutorial/step_9.md +171 -0
  57. data/docs/upgrading.md +265 -0
  58. data/gemfiles/rails_7_1.gemfile +4 -3
  59. data/gemfiles/{rails_7_2_graphiti_rails.gemfile → rails_7_2.gemfile} +3 -3
  60. data/gemfiles/{rails_8_1_graphiti_rails.gemfile → rails_8_0.gemfile} +3 -3
  61. data/gemfiles/{rails_8_0_graphiti_rails.gemfile → rails_8_1.gemfile} +3 -3
  62. data/graphiti.gemspec +7 -5
  63. data/{deprecated_generators → lib/generators}/graphiti/api_test_generator.rb +7 -1
  64. data/{deprecated_generators → lib/generators}/graphiti/generator_mixin.rb +14 -1
  65. data/{deprecated_generators → lib/generators}/graphiti/install_generator.rb +19 -13
  66. data/{deprecated_generators → lib/generators}/graphiti/resource_generator.rb +43 -6
  67. data/{deprecated_generators → lib/generators}/graphiti/templates/index_request_spec.rb.erb +1 -1
  68. data/{deprecated_generators → lib/generators}/graphiti/templates/resource_reads_spec.rb.erb +6 -6
  69. data/{deprecated_generators → lib/generators}/graphiti/templates/show_request_spec.rb.erb +1 -1
  70. data/lib/graphiti/configuration.rb +2 -2
  71. data/lib/graphiti/error_serializers/conflict_request.rb +19 -0
  72. data/lib/graphiti/error_serializers/deprecated_constants.rb +48 -0
  73. data/lib/graphiti/error_serializers/invalid_request.rb +56 -0
  74. data/lib/graphiti/error_serializers/validation.rb +143 -0
  75. data/lib/graphiti/errors.rb +4 -23
  76. data/lib/graphiti/query.rb +1 -1
  77. data/lib/graphiti/rails/context.rb +33 -0
  78. data/lib/graphiti/rails/controller.rb +41 -0
  79. data/lib/graphiti/rails/debugging.rb +18 -0
  80. data/lib/graphiti/rails/exception_handlers.rb +77 -0
  81. data/lib/graphiti/rails/railtie.rb +139 -0
  82. data/lib/graphiti/rails/responders.rb +21 -0
  83. data/lib/graphiti/rails/test_helpers.rb +22 -0
  84. data/lib/graphiti/rails.rb +47 -29
  85. data/lib/graphiti/resource/configuration.rb +1 -0
  86. data/lib/graphiti/resource/interface.rb +2 -2
  87. data/lib/graphiti/resource/persistence.rb +14 -2
  88. data/lib/graphiti/resource/remote.rb +2 -2
  89. data/lib/graphiti/resource/sideloading.rb +1 -1
  90. data/lib/graphiti/resource.rb +13 -1
  91. data/lib/graphiti/responders.rb +7 -20
  92. data/lib/graphiti/schema.rb +5 -1
  93. data/lib/graphiti/schema_diff.rb +4 -0
  94. data/lib/graphiti/scope.rb +45 -37
  95. data/lib/graphiti/serializer.rb +6 -0
  96. data/lib/graphiti/sideload/belongs_to.rb +38 -5
  97. data/lib/graphiti/sideload/polymorphic_belongs_to.rb +27 -23
  98. data/lib/graphiti/sideload.rb +54 -35
  99. data/lib/graphiti/spec_helpers/errors.rb +73 -0
  100. data/lib/graphiti/spec_helpers/errors_proxy.rb +75 -0
  101. data/lib/graphiti/spec_helpers/helpers.rb +107 -0
  102. data/lib/graphiti/spec_helpers/node.rb +88 -0
  103. data/lib/graphiti/spec_helpers/rspec.rb +147 -0
  104. data/lib/graphiti/spec_helpers.rb +53 -0
  105. data/lib/graphiti/util/include_params.rb +2 -2
  106. data/lib/graphiti/util/persistence.rb +10 -11
  107. data/lib/graphiti/util/serializer_relationships.rb +41 -5
  108. data/lib/graphiti/version.rb +1 -1
  109. data/lib/graphiti-rails.rb +11 -0
  110. data/lib/graphiti.rb +34 -10
  111. data/lib/graphiti_errors.rb +11 -0
  112. data/lib/graphiti_spec_helpers/rspec.rb +3 -0
  113. data/lib/graphiti_spec_helpers.rb +11 -0
  114. data/lib/{graphiti/deprecated_tasks.rb → tasks/graphiti.rake} +6 -1
  115. data/package-lock.json +6199 -0
  116. data/package.json +5 -4
  117. data/website/.gitignore +20 -0
  118. data/website/README.md +43 -0
  119. data/website/docusaurus.config.js +141 -0
  120. data/website/package-lock.json +19474 -0
  121. data/website/package.json +46 -0
  122. data/website/sidebars.js +82 -0
  123. data/website/src/css/custom.css +58 -0
  124. data/website/src/pages/markdown-page.mdx +7 -0
  125. data/website/static/.nojekyll +0 -0
  126. data/website/static/1.13/2019/03/31/graphiti-1-0.html +205 -0
  127. data/website/static/1.13/2019/05/08/graphiti-1-1.html +212 -0
  128. data/website/static/1.13/2019/05/20/graphiti-1-2.html +214 -0
  129. data/website/static/1.13/2019/10/14/tutorial.html +198 -0
  130. data/website/static/1.13/CNAME +1 -0
  131. data/website/static/1.13/README.md +16 -0
  132. data/website/static/1.13/assets/css/syntax.css +60 -0
  133. data/website/static/1.13/assets/favicons/android-chrome-192x192.png +0 -0
  134. data/website/static/1.13/assets/favicons/android-chrome-256x256.png +0 -0
  135. data/website/static/1.13/assets/favicons/apple-touch-icon.png +0 -0
  136. data/website/static/1.13/assets/favicons/browserconfig.xml +9 -0
  137. data/website/static/1.13/assets/favicons/favicon-16x16.png +0 -0
  138. data/website/static/1.13/assets/favicons/favicon-32x32.png +0 -0
  139. data/website/static/1.13/assets/favicons/favicon.ico +0 -0
  140. data/website/static/1.13/assets/favicons/mstile-150x150.png +0 -0
  141. data/website/static/1.13/assets/favicons/safari-pinned-tab.svg +1 -0
  142. data/website/static/1.13/assets/favicons/site.webmanifest +19 -0
  143. data/website/static/1.13/assets/img/backend.gif +0 -0
  144. data/website/static/1.13/assets/img/conformity.png +0 -0
  145. data/website/static/1.13/assets/img/error_payload.png +0 -0
  146. data/website/static/1.13/assets/img/gh.png +0 -0
  147. data/website/static/1.13/assets/img/lifecycle.gif +0 -0
  148. data/website/static/1.13/assets/img/logo-500.png +0 -0
  149. data/website/static/1.13/assets/img/logo.png +0 -0
  150. data/website/static/1.13/assets/img/love-graffiti.jpg +0 -0
  151. data/website/static/1.13/assets/img/meta_total_count.png +0 -0
  152. data/website/static/1.13/assets/img/persist.jpg +0 -0
  153. data/website/static/1.13/assets/img/resource.gif +0 -0
  154. data/website/static/1.13/assets/img/rest-graffiti.jpg +0 -0
  155. data/website/static/1.13/assets/img/rest1.gif +0 -0
  156. data/website/static/1.13/assets/img/rest2.gif +0 -0
  157. data/website/static/1.13/assets/img/rest3.gif +0 -0
  158. data/website/static/1.13/assets/img/rethink-rest-graffiti.jpg +0 -0
  159. data/website/static/1.13/assets/img/why.png +0 -0
  160. data/website/static/1.13/assets/js/highlight.pack.js +2 -0
  161. data/website/static/1.13/assets/main.css +15518 -0
  162. data/website/static/1.13/assets/main.css.map +1 -0
  163. data/website/static/1.13/bin/bundle +109 -0
  164. data/website/static/1.13/bin/jekyll +27 -0
  165. data/website/static/1.13/bin/kramdown +27 -0
  166. data/website/static/1.13/bin/listen +27 -0
  167. data/website/static/1.13/bin/rake +27 -0
  168. data/website/static/1.13/bin/rougify +27 -0
  169. data/website/static/1.13/bin/safe_yaml +27 -0
  170. data/website/static/1.13/bin/sass +27 -0
  171. data/website/static/1.13/bin/sass-convert +27 -0
  172. data/website/static/1.13/bin/scss +27 -0
  173. data/website/static/1.13/blog.html +259 -0
  174. data/website/static/1.13/cheatsheet.html +316 -0
  175. data/website/static/1.13/cookbooks/authorization.md +0 -0
  176. data/website/static/1.13/cookbooks/caching.md +0 -0
  177. data/website/static/1.13/cookbooks/customizing-sideloads.html +325 -0
  178. data/website/static/1.13/cookbooks/etags.md +0 -0
  179. data/website/static/1.13/cookbooks/hopping-relationships.html +324 -0
  180. data/website/static/1.13/cookbooks/json_attributes.md +0 -0
  181. data/website/static/1.13/cookbooks/openstruct-models.md +0 -0
  182. data/website/static/1.13/cookbooks/remote-resources.md +0 -0
  183. data/website/static/1.13/cookbooks/without-activerecord.html +510 -0
  184. data/website/static/1.13/features.html +249 -0
  185. data/website/static/1.13/feed.xml +106 -0
  186. data/website/static/1.13/guides/concepts/backends-and-models.html +467 -0
  187. data/website/static/1.13/guides/concepts/debugging.html +440 -0
  188. data/website/static/1.13/guides/concepts/endpoints.html +432 -0
  189. data/website/static/1.13/guides/concepts/error-handling.html +396 -0
  190. data/website/static/1.13/guides/concepts/links.html +501 -0
  191. data/website/static/1.13/guides/concepts/remote-resources.html +536 -0
  192. data/website/static/1.13/guides/concepts/resources.html +2176 -0
  193. data/website/static/1.13/guides/concepts/testing.html +1469 -0
  194. data/website/static/1.13/guides/getting-started/installation.html +420 -0
  195. data/website/static/1.13/guides/graphiti-rails-migration.html +242 -0
  196. data/website/static/1.13/guides/index.html +269 -0
  197. data/website/static/1.13/guides/overview.html +325 -0
  198. data/website/static/1.13/guides/upgrading-2-0.html +193 -0
  199. data/website/static/1.13/guides/upgrading.html +314 -0
  200. data/website/static/1.13/guides/vandal.html +282 -0
  201. data/website/static/1.13/guides/why.html +1121 -0
  202. data/website/static/1.13/index.html +72 -0
  203. data/website/static/1.13/js/authentication.html +295 -0
  204. data/website/static/1.13/js/ddau.html +238 -0
  205. data/website/static/1.13/js/extra-params.html +270 -0
  206. data/website/static/1.13/js/index.html +321 -0
  207. data/website/static/1.13/js/installation.html +637 -0
  208. data/website/static/1.13/js/introduction.html +257 -0
  209. data/website/static/1.13/js/middleware.html +318 -0
  210. data/website/static/1.13/js/reads/fieldsets.html +271 -0
  211. data/website/static/1.13/js/reads/filtering.html +289 -0
  212. data/website/static/1.13/js/reads/includes.html +260 -0
  213. data/website/static/1.13/js/reads/index.html +497 -0
  214. data/website/static/1.13/js/reads/nested-queries.html +353 -0
  215. data/website/static/1.13/js/reads/pagination.html +260 -0
  216. data/website/static/1.13/js/reads/sorting.html +265 -0
  217. data/website/static/1.13/js/reads/statistics.html +289 -0
  218. data/website/static/1.13/js/state-syncing.html +340 -0
  219. data/website/static/1.13/js/writes/deferred.html +296 -0
  220. data/website/static/1.13/js/writes/dirty-tracking.html +399 -0
  221. data/website/static/1.13/js/writes/index.html +391 -0
  222. data/website/static/1.13/js/writes/nested.html +330 -0
  223. data/website/static/1.13/js/writes/validations.html +272 -0
  224. data/website/static/1.13/quickstart.html +660 -0
  225. data/website/static/1.13/template +161 -0
  226. data/website/static/1.13/tutorial/index.html +250 -0
  227. data/website/static/1.13/tutorial/step_0.html +292 -0
  228. data/website/static/1.13/tutorial/step_1.html +517 -0
  229. data/website/static/1.13/tutorial/step_2.html +481 -0
  230. data/website/static/1.13/tutorial/step_3.html +323 -0
  231. data/website/static/1.13/tutorial/step_4.html +318 -0
  232. data/website/static/1.13/tutorial/step_5.html +265 -0
  233. data/website/static/1.13/tutorial/step_6.html +276 -0
  234. data/website/static/1.13/tutorial/step_7.html +390 -0
  235. data/website/static/1.13/tutorial/step_8.html +316 -0
  236. data/website/static/1.13/tutorial/step_9.html +365 -0
  237. data/website/static/assets/img/error_payload.png +0 -0
  238. data/website/static/assets/img/legacy/legacy-0378a3bb39.png +0 -0
  239. data/website/static/assets/img/legacy/legacy-05bbd3e5fd.png +0 -0
  240. data/website/static/assets/img/legacy/legacy-07aa104495.png +0 -0
  241. data/website/static/assets/img/legacy/legacy-0c75a16b3a.gif +0 -0
  242. data/website/static/assets/img/legacy/legacy-3076df6209.png +0 -0
  243. data/website/static/assets/img/legacy/legacy-7f6889bc89.png +0 -0
  244. data/website/static/assets/img/legacy/legacy-a2cc4363c3.png +0 -0
  245. data/website/static/assets/img/legacy/legacy-f67cfa89ab.png +0 -0
  246. data/website/static/assets/img/meta_total_count.png +0 -0
  247. data/website/static/img/docusaurus-social-card.jpg +0 -0
  248. data/website/static/img/docusaurus.png +0 -0
  249. data/website/static/img/favicon.ico +0 -0
  250. data/website/static/img/logo.png +0 -0
  251. data/website/static/img/logo.svg +1 -0
  252. data/website/static/img/undraw_docusaurus_mountain.svg +171 -0
  253. data/website/static/img/undraw_docusaurus_react.svg +170 -0
  254. data/website/static/img/undraw_docusaurus_tree.svg +40 -0
  255. metadata +245 -46
  256. data/gemfiles/rails_6.gemfile +0 -18
  257. data/gemfiles/rails_6_graphiti_rails.gemfile +0 -19
  258. data/gemfiles/rails_7.gemfile +0 -18
  259. data/gemfiles/rails_7_1_graphiti_rails.gemfile +0 -19
  260. data/gemfiles/rails_7_graphiti_rails.gemfile +0 -19
  261. data/lib/graphiti/railtie.rb +0 -121
  262. /data/{deprecated_generators → lib/generators}/graphiti/resource_test_generator.rb +0 -0
  263. /data/{deprecated_generators → lib/generators}/graphiti/templates/application_resource.rb.erb +0 -0
  264. /data/{deprecated_generators → lib/generators}/graphiti/templates/controller.rb.erb +0 -0
  265. /data/{deprecated_generators → lib/generators}/graphiti/templates/create_request_spec.rb.erb +0 -0
  266. /data/{deprecated_generators → lib/generators}/graphiti/templates/destroy_request_spec.rb.erb +0 -0
  267. /data/{deprecated_generators → lib/generators}/graphiti/templates/resource.rb.erb +0 -0
  268. /data/{deprecated_generators → lib/generators}/graphiti/templates/resource_writes_spec.rb.erb +0 -0
  269. /data/{deprecated_generators → lib/generators}/graphiti/templates/update_request_spec.rb.erb +0 -0
data/website/static/1.13/js/state-syncing.html ADDED
@@ -0,0 +1,340 @@
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="state-syncing">State Syncing</h3>
130
+
131
+ <p>You may have encountered state management libraries like <a href="https://facebook.github.io/flux/docs/overview.html">Flux</a>,
132
+ <a href="https://redux.js.org">Redux</a> or <a href="https://vuex.vuejs.org/en/intro.html">Vuex</a>. These are fantastic libraries, but their usefulness is lessened with Spraypaint. As a full-fledged model layer, Spraypaint manages state for you, automatically.</p>
133
+
134
+ <p>If you opt-in to this feature:</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">sync</span> <span class="o">=</span> <span class="kc">true</span></code></pre></figure>
137
+
138
+ <p>Instances will sync up whenever the server tells us about updated state.
139
+ Consider the scenario where an instance is initially loaded, then separately polled in the background:</p>
140
+
141
+ <div class="tabs">
142
+ <div class="tab typescript active">
143
+ <span>Typescript</span>
144
+ </div>
145
+ <div class="tab javascript">
146
+ <span>Javascript</span>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="code-tabs">
151
+
152
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"> <span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">(</span><span class="k">await</span> <span class="nx">Person</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">1</span><span class="p">)).</span><span class="nx">data</span>
153
+
154
+ <span class="kd">let</span> <span class="nx">poll</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
155
+ <span class="k">await</span> <span class="nx">Person</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
156
+ <span class="nf">setTimeout</span><span class="p">(</span><span class="nx">poll</span><span class="p">,</span> <span class="mi">1000</span><span class="p">)</span>
157
+ <span class="p">}</span>
158
+ <span class="nf">poll</span><span class="p">()</span>
159
+ </code></pre></figure>
160
+
161
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">Person</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
162
+ <span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
163
+ <span class="p">});</span>
164
+
165
+ <span class="kd">var</span> <span class="nx">poll</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
166
+ <span class="nx">Person</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
167
+ <span class="nf">setTimeout</span><span class="p">(</span><span class="nx">poll</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span>
168
+ <span class="p">}</span>
169
+ <span class="nf">poll</span><span class="p">()</span>
170
+ </code></pre></figure>
171
+
172
+ </div>
173
+
174
+ <p>Note that our <code class="language-plaintext highlighter-rouge">poll()</code> function <strong>never assigns or updates <code class="language-plaintext highlighter-rouge">person</code></strong>.
175
+ But if the server returns an updated <code class="language-plaintext highlighter-rouge">name</code> attribute, <strong><code class="language-plaintext highlighter-rouge">person.name</code>
176
+ will be automatically updated</strong>. This is true even if <code class="language-plaintext highlighter-rouge">person.name</code>
177
+ is bound in 17 different nested components.</p>
178
+
179
+ <p>Instances can still update their attributes independently - we only sync
180
+ when the server returns updated data:</p>
181
+
182
+ <div class="tabs">
183
+ <div class="tab typescript active">
184
+ <span>Typescript</span>
185
+ </div>
186
+ <div class="tab javascript">
187
+ <span>Javascript</span>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="code-tabs">
192
+
193
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"> <span class="kd">let</span> <span class="nx">instanceA</span> <span class="o">=</span> <span class="p">(</span><span class="k">await</span> <span class="nx">Person</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">1</span><span class="p">)).</span><span class="nx">data</span>
194
+ <span class="kd">let</span> <span class="nx">instanceB</span> <span class="o">=</span> <span class="p">(</span><span class="k">await</span> <span class="nx">Person</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">1</span><span class="p">)).</span><span class="nx">data</span>
195
+
196
+ <span class="nx">instanceA</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Jane"</span>
197
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Jane"</span>
198
+
199
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Silvia</span><span class="dl">"</span>
200
+ <span class="nx">instanceA</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Jane"</span>
201
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Silvia"</span>
202
+
203
+ <span class="k">await</span> <span class="nx">instanceB</span><span class="p">.</span><span class="nf">save</span><span class="p">()</span>
204
+ <span class="nx">instanceA</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Silvia"</span>
205
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Silvia"</span>
206
+ </code></pre></figure>
207
+
208
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">instanceA</span><span class="p">,</span> <span class="nx">instanceB</span><span class="p">;</span>
209
+ <span class="nx">Person</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
210
+ <span class="nx">instanceA</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
211
+ <span class="p">});</span>
212
+ <span class="nx">Person</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">1</span><span class="p">).</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
213
+ <span class="nx">instanceB</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
214
+ <span class="p">});</span>
215
+
216
+ <span class="nx">instanceA</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Jane"</span>
217
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Jane"</span>
218
+
219
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Silvia</span><span class="dl">"</span>
220
+ <span class="nx">instanceA</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Jane"</span>
221
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Silvia"</span>
222
+
223
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nf">save</span><span class="p">().</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
224
+ <span class="nx">instanceA</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Silvia"</span>
225
+ <span class="nx">instanceB</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// "Silvia"</span>
226
+ <span class="p">});</span>
227
+ </code></pre></figure>
228
+
229
+ </div>
230
+
231
+ <h4 id="gotchas">Gotchas</h4>
232
+
233
+ <p>Under the hood, instances are listening for updates from a central data
234
+ store. This means that you’ll want to remove listeners whenever you no
235
+ longer need the instance - otherwise it will never be garbage collected
236
+ properly. To remove a listener:</p>
237
+
238
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="nx">instance</span><span class="p">.</span><span class="nf">unlisten</span><span class="p">()</span></code></pre></figure>
239
+
240
+ <p>In practice, when developing in a SPA, you’ll want to <code class="language-plaintext highlighter-rouge">#unlisten()</code>
241
+ whenever a view is destroyed and model instances no longer need to be referenced. If
242
+ you are using VueJS, this is done automatically by adding <a href="https://github.com/graphiti-api/spraypaint-vue">spraypaint-vue</a>
243
+ to your application.</p>
244
+ </div>
245
+
246
+ </div>
247
+ </div>
248
+ </main>
249
+ <div class="main-footer main-footer--dark">
250
+ <div class="container">
251
+ <div class="row">
252
+ <div class="col-sm-4 menu">
253
+ <h3>Overview</h3>
254
+ <ul>
255
+ <li>
256
+ <a href="/1.13/quickstart">Quickstart</a>
257
+ </li>
258
+ <li>
259
+ <a href="/1.13/tutorial">Tutorial</a>
260
+ </li>
261
+ <li>
262
+ <a href="/1.13/guides">Guides</a>
263
+ </li>
264
+ </ul>
265
+ </div>
266
+ <div class="col-sm-4 menu">
267
+ <h3>Contact</h3>
268
+ <ul>
269
+ <li>
270
+ <a target="_blank" href="https://discord.gg/wgqkMBsSRV">Discord Chat</a>
271
+ </li>
272
+ <li>
273
+ <a href="mailto:richmolj@gmail.com">Email</a>
274
+ </li>
275
+ </ul>
276
+ </div>
277
+ <div class="col-sm-4 menu">
278
+ <h3>Related</h3>
279
+ <ul>
280
+ <li>
281
+ <a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
282
+ </li>
283
+ <li>
284
+ <a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
285
+ </li>
286
+ <li>
287
+ <a target="_blank" href="https://vuejs.org/">VueJS</a>
288
+ </li>
289
+ </ul>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <script type="text/javascript">
296
+ $(function () {
297
+
298
+ var flipTabs = function() {
299
+ var isTS = true;
300
+ if (localStorage.getItem('js-lang') === 'javascript') {
301
+ isTS = false;
302
+ }
303
+
304
+ $('.code-tabs').each(function(index, el) {
305
+ if (isTS) {
306
+ console.log('hiding js');
307
+ $($(el).children()[1]).hide();
308
+ $($(el).children()[0]).show();
309
+ } else {
310
+ console.log('hiding ts');
311
+ $($(el).children()[0]).hide();
312
+ $($(el).children()[1]).show();
313
+ }
314
+ });
315
+
316
+ if (isTS) {
317
+ $('.tab.typescript').addClass('active');
318
+ $('.tab.javascript').removeClass('active');
319
+ } else {
320
+ $('.tab.typescript').removeClass('active');
321
+ $('.tab.javascript').addClass('active');
322
+ }
323
+ }
324
+
325
+ $('.tab').click(function() {
326
+ if ($(this).hasClass('typescript')) {
327
+ localStorage.setItem('js-lang', 'typescript');
328
+ } else {
329
+ localStorage.setItem('js-lang', 'javascript');
330
+ }
331
+
332
+ flipTabs();
333
+ });
334
+
335
+ flipTabs();
336
+ })
337
+ </script>
338
+
339
+ </body>
340
+ </html>
data/website/static/1.13/js/writes/deferred.html ADDED
@@ -0,0 +1,296 @@
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="deferred-action">Deferred Action</h3>
130
+
131
+ <p>If your update or destroy action takes a long time then the server can respond with status code <code class="language-plaintext highlighter-rouge">202 Accepted</code> and include background job object in the payload.</p>
132
+
133
+ <p>Example response:</p>
134
+ <div class="code-tabs">
135
+
136
+ <figure class="highlight"><pre><code class="language-http" data-lang="http"><span class="k">HTTP</span><span class="o">/</span><span class="m">1.1</span> <span class="m">202</span> <span class="ne">Accepted</span>
137
+ <span class="na">Content-Type</span><span class="p">:</span> <span class="s">application/vnd.api+json</span>
138
+
139
+ <span class="p">{</span><span class="w">
140
+ </span><span class="nl">"data"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
141
+ </span><span class="nl">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"background_jobs"</span><span class="p">,</span><span class="w">
142
+ </span><span class="nl">"id"</span><span class="p">:</span><span class="w"> </span><span class="s2">"550e8400-e29b-41d4-a716-446655440000"</span><span class="p">,</span><span class="w">
143
+ </span><span class="nl">"attributes"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
144
+ </span><span class="nl">"status"</span><span class="p">:</span><span class="w"> </span><span class="s2">"pending"</span><span class="w">
145
+ </span><span class="p">}</span><span class="w">
146
+ </span><span class="p">}</span><span class="w">
147
+ </span><span class="p">}</span><span class="w">
148
+ </span></code></pre></figure>
149
+
150
+ </div>
151
+
152
+ <p>You will need to give the model object a callback called <code class="language-plaintext highlighter-rouge">onDeferredDestroy</code> or <code class="language-plaintext highlighter-rouge">onDeferredUpdate</code>. Spraypaint will then call your callback with the deserialized object included in the payload.</p>
153
+
154
+ <div class="tabs">
155
+ <div class="tab typescript active">
156
+ <span>Typescript</span>
157
+ </div>
158
+ <div class="tab javascript">
159
+ <span>Javascript</span>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="code-tabs">
164
+
165
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Person</span><span class="p">({</span> <span class="na">firstName</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Jane</span><span class="dl">'</span> <span class="p">})</span>
166
+ <span class="nx">person</span><span class="p">.</span><span class="nx">onDeferredUpdate</span> <span class="o">=</span> <span class="p">(</span><span class="nx">job</span><span class="p">:</span> <span class="kr">any</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
167
+ <span class="nf">handleBackgroundJob</span><span class="p">(</span><span class="nx">job</span><span class="p">);</span>
168
+ <span class="p">}</span>
169
+ <span class="nx">person</span><span class="p">.</span><span class="nf">save</span><span class="p">()</span>
170
+
171
+ <span class="nx">person</span><span class="p">.</span><span class="nx">onDeferredDestroy</span> <span class="o">=</span> <span class="p">(</span><span class="nx">job</span><span class="p">:</span> <span class="kr">any</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
172
+ <span class="nf">handleBackgroundJob</span><span class="p">(</span><span class="nx">job</span><span class="p">);</span>
173
+ <span class="p">}</span>
174
+ <span class="nx">person</span><span class="p">.</span><span class="nf">destroy</span><span class="p">()</span>
175
+ </code></pre></figure>
176
+
177
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Person</span><span class="p">({</span> <span class="na">firstName</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Jane</span><span class="dl">'</span> <span class="p">});</span>
178
+ <span class="nx">person</span><span class="p">.</span><span class="nx">onDeferredUpdate</span> <span class="o">=</span> <span class="p">(</span><span class="nx">job</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
179
+ <span class="nf">handleBackgroundJob</span><span class="p">(</span><span class="nx">job</span><span class="p">);</span>
180
+ <span class="p">};</span>
181
+ <span class="nx">person</span><span class="p">.</span><span class="nf">save</span><span class="p">();</span>
182
+
183
+ <span class="nx">person</span><span class="p">.</span><span class="nx">onDeferredDestroy</span> <span class="o">=</span> <span class="p">(</span><span class="nx">job</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
184
+ <span class="nf">handleBackgroundJob</span><span class="p">(</span><span class="nx">job</span><span class="p">);</span>
185
+ <span class="p">};</span>
186
+ <span class="nx">person</span><span class="p">.</span><span class="nf">destroy</span><span class="p">();</span>
187
+ </code></pre></figure>
188
+
189
+ </div>
190
+
191
+ <div class="clearfix">
192
+ <h2 id="next">
193
+ <a href="/1.13/js/middleware">
194
+ NEXT:
195
+ <small>Middleware</small>
196
+ &raquo;
197
+ </a>
198
+ </h2>
199
+ </div>
200
+ </div>
201
+
202
+ </div>
203
+ </div>
204
+ </main>
205
+ <div class="main-footer main-footer--dark">
206
+ <div class="container">
207
+ <div class="row">
208
+ <div class="col-sm-4 menu">
209
+ <h3>Overview</h3>
210
+ <ul>
211
+ <li>
212
+ <a href="/1.13/quickstart">Quickstart</a>
213
+ </li>
214
+ <li>
215
+ <a href="/1.13/tutorial">Tutorial</a>
216
+ </li>
217
+ <li>
218
+ <a href="/1.13/guides">Guides</a>
219
+ </li>
220
+ </ul>
221
+ </div>
222
+ <div class="col-sm-4 menu">
223
+ <h3>Contact</h3>
224
+ <ul>
225
+ <li>
226
+ <a target="_blank" href="https://discord.gg/wgqkMBsSRV">Discord Chat</a>
227
+ </li>
228
+ <li>
229
+ <a href="mailto:richmolj@gmail.com">Email</a>
230
+ </li>
231
+ </ul>
232
+ </div>
233
+ <div class="col-sm-4 menu">
234
+ <h3>Related</h3>
235
+ <ul>
236
+ <li>
237
+ <a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
238
+ </li>
239
+ <li>
240
+ <a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
241
+ </li>
242
+ <li>
243
+ <a target="_blank" href="https://vuejs.org/">VueJS</a>
244
+ </li>
245
+ </ul>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+
251
+ <script type="text/javascript">
252
+ $(function () {
253
+
254
+ var flipTabs = function() {
255
+ var isTS = true;
256
+ if (localStorage.getItem('js-lang') === 'javascript') {
257
+ isTS = false;
258
+ }
259
+
260
+ $('.code-tabs').each(function(index, el) {
261
+ if (isTS) {
262
+ console.log('hiding js');
263
+ $($(el).children()[1]).hide();
264
+ $($(el).children()[0]).show();
265
+ } else {
266
+ console.log('hiding ts');
267
+ $($(el).children()[0]).hide();
268
+ $($(el).children()[1]).show();
269
+ }
270
+ });
271
+
272
+ if (isTS) {
273
+ $('.tab.typescript').addClass('active');
274
+ $('.tab.javascript').removeClass('active');
275
+ } else {
276
+ $('.tab.typescript').removeClass('active');
277
+ $('.tab.javascript').addClass('active');
278
+ }
279
+ }
280
+
281
+ $('.tab').click(function() {
282
+ if ($(this).hasClass('typescript')) {
283
+ localStorage.setItem('js-lang', 'typescript');
284
+ } else {
285
+ localStorage.setItem('js-lang', 'javascript');
286
+ }
287
+
288
+ flipTabs();
289
+ });
290
+
291
+ flipTabs();
292
+ })
293
+ </script>
294
+
295
+ </body>
296
+ </html>