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/installation.html ADDED
@@ -0,0 +1,637 @@
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="installation">Installation</h3>
130
+
131
+ <p>Installation is straightforward. Since we use <code class="language-plaintext highlighter-rouge">fetch</code> underneath the
132
+ hood, we recommend installing alongside a <code class="language-plaintext highlighter-rouge">fetch</code> polyfill.</p>
133
+
134
+ <p>If using <code class="language-plaintext highlighter-rouge">yarn</code>:</p>
135
+
136
+ <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>yarn add spraypaint isomorphic-fetch</code></pre></figure>
137
+
138
+ <p>If using <code class="language-plaintext highlighter-rouge">npm</code>:</p>
139
+
140
+ <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>npm <span class="nb">install </span>spraypaint isomorphic-fetch</code></pre></figure>
141
+
142
+ <p>Now import it:</p>
143
+
144
+ <div class="tabs">
145
+ <div class="tab typescript active">
146
+ <span>Typescript</span>
147
+ </div>
148
+ <div class="tab javascript">
149
+ <span>Javascript</span>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="code-tabs">
154
+
155
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="k">import</span> <span class="p">{</span>
156
+ <span class="nx">Model</span><span class="p">,</span>
157
+ <span class="nx">SpraypaintBase</span><span class="p">,</span>
158
+ <span class="nx">Attr</span><span class="p">,</span>
159
+ <span class="nx">BelongsTo</span><span class="p">,</span>
160
+ <span class="nx">HasMany</span>
161
+ <span class="c1">// etc</span>
162
+ <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">spraypaint</span><span class="dl">"</span></code></pre></figure>
163
+
164
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="p">{</span>
165
+ <span class="nx">SpraypaintBase</span><span class="p">,</span>
166
+ <span class="nx">attr</span><span class="p">,</span>
167
+ <span class="nx">belongsTo</span><span class="p">,</span>
168
+ <span class="nx">hasMany</span>
169
+ <span class="c1">// etc</span>
170
+ <span class="p">}</span> <span class="o">=</span> <span class="nf">require</span><span class="p">(</span><span class="dl">"</span><span class="s2">spraypaint/dist/spraypaint</span><span class="dl">"</span><span class="p">)</span></code></pre></figure>
171
+
172
+ </div>
173
+
174
+ <p>…or, if you’re avoiding JS modules, <code class="language-plaintext highlighter-rouge">spraypaint</code> will be available as a global in
175
+ the browser.</p>
176
+
177
+ <h3 id="typescript">Typescript</h3>
178
+
179
+ <p>Spraypaint supports Typescript versions <code class="language-plaintext highlighter-rouge">&gt;= 2.8</code>.</p>
180
+
181
+ <p>By default you will need a <code class="language-plaintext highlighter-rouge">!</code> after each attribute and relationship:</p>
182
+
183
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="p">@</span><span class="nd">Attr</span> <span class="nx">first_name</span><span class="o">!</span><span class="p">:</span> <span class="kr">string</span>
184
+ <span class="p">@</span><span class="nd">HasMany</span><span class="p">()</span> <span class="nx">positions</span><span class="o">!</span><span class="p">:</span> <span class="nx">Position</span><span class="p">[]</span></code></pre></figure>
185
+
186
+ <p>This is due to <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#strict-class-initialization">Strict Class Initialization</a>. For the purposes of Spraypaint, we don’t need this. Remove the need for
187
+ <code class="language-plaintext highlighter-rouge">!</code> (as the rest of these guides do) by setting</p>
188
+
189
+ <p><code class="language-plaintext highlighter-rouge">"strictPropertyInitialization": false</code></p>
190
+
191
+ <p>in <code class="language-plaintext highlighter-rouge">tsconfig.json</code>.</p>
192
+
193
+ <h3 id="defining-models">Defining Models</h3>
194
+
195
+ <h4 id="connecting-to-the-api">Connecting to the API</h4>
196
+
197
+ <p>Just like <code class="language-plaintext highlighter-rouge">ActiveRecord</code>, our models will inherit from a base class that
198
+ holds connection information (<code class="language-plaintext highlighter-rouge">ApplicationRecord</code>, or
199
+ <code class="language-plaintext highlighter-rouge">ActiveRecord::Base</code> in Rails &lt; 5):</p>
200
+
201
+ <div class="tabs">
202
+ <div class="tab typescript active">
203
+ <span>Typescript</span>
204
+ </div>
205
+ <div class="tab javascript">
206
+ <span>Javascript</span>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="code-tabs">
211
+
212
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="p">@</span><span class="nd">Model</span><span class="p">()</span>
213
+ <span class="kd">class</span> <span class="nc">ApplicationRecord</span> <span class="kd">extends</span> <span class="nc">SpraypaintBase</span> <span class="p">{</span>
214
+ <span class="k">static</span> <span class="nx">baseUrl</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">http://my-api.com</span><span class="dl">"</span>
215
+ <span class="k">static</span> <span class="nx">apiNamespace</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">/api/v1</span><span class="dl">"</span>
216
+ <span class="p">}</span></code></pre></figure>
217
+
218
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</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>
219
+ <span class="na">static</span><span class="p">:</span> <span class="p">{</span>
220
+ <span class="na">baseUrl</span><span class="p">:</span> <span class="dl">"</span><span class="s2">http://my-api.com</span><span class="dl">"</span><span class="p">,</span>
221
+ <span class="na">apiNamespace</span><span class="p">:</span> <span class="dl">"</span><span class="s2">/api/v1</span><span class="dl">"</span>
222
+ <span class="p">}</span>
223
+ <span class="p">})</span></code></pre></figure>
224
+
225
+ <p>All URLs follow the following pattern:</p>
226
+
227
+ <ul>
228
+ <li><code class="language-plaintext highlighter-rouge">baseUrl</code> + <code class="language-plaintext highlighter-rouge">apiNamespace</code> + <code class="language-plaintext highlighter-rouge">jsonapiType</code></li>
229
+ </ul>
230
+
231
+ <p>As you can see above, typically <code class="language-plaintext highlighter-rouge">baseUrl</code> and <code class="language-plaintext highlighter-rouge">apiNamespace</code> are set on
232
+ a top-level <code class="language-plaintext highlighter-rouge">ApplicationRecord</code> (though any subclass can override).
233
+ <code class="language-plaintext highlighter-rouge">jsonapiType</code>, however, is set per-model:</p>
234
+
235
+ <div class="tabs">
236
+ <div class="tab typescript active">
237
+ <span>Typescript</span>
238
+ </div>
239
+ <div class="tab javascript">
240
+ <span>Javascript</span>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="code-tabs">
245
+
246
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="p">@</span><span class="nd">Model</span><span class="p">()</span>
247
+ <span class="kd">class</span> <span class="nc">Person</span> <span class="kd">extends</span> <span class="nc">ApplicationRecord</span> <span class="p">{</span>
248
+ <span class="k">static</span> <span class="nx">jsonapiType</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">people</span><span class="dl">"</span>
249
+ <span class="p">}</span></code></pre></figure>
250
+
251
+ <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="nx">ApplicationRecord</span><span class="p">.</span><span class="nf">extend</span><span class="p">({</span>
252
+ <span class="na">static</span><span class="p">:</span> <span class="p">{</span>
253
+ <span class="na">jsonapiType</span><span class="p">:</span> <span class="dl">"</span><span class="s2">people</span><span class="dl">"</span>
254
+ <span class="p">}</span>
255
+ <span class="p">})</span></code></pre></figure>
256
+
257
+ </div>
258
+
259
+ <p>With the above configuration, all <code class="language-plaintext highlighter-rouge">Person</code> endpoints will begin
260
+ <code class="language-plaintext highlighter-rouge">http://my-api.com/api/v1/people</code>.</p>
261
+
262
+ <blockquote>
263
+ <p><strong>TIP</strong>: Avoid CORS and use relative paths by simply setting <code class="language-plaintext highlighter-rouge">baseUrl</code> to
264
+ <code class="language-plaintext highlighter-rouge">""</code></p>
265
+ </blockquote>
266
+
267
+ <blockquote>
268
+ <p><strong>TIP</strong>: You can always use the <code class="language-plaintext highlighter-rouge">endpoint</code> option to override this pattern
269
+ and set the endpoint manually.</p>
270
+ </blockquote>
271
+
272
+ <h5 id="setting-application-name">Setting Application Name</h5>
273
+
274
+ <p>It can be helpful to send the name of your client application in request
275
+ headers. With this information, servers can keep track of which clients
276
+ are hitting which APIs.</p>
277
+
278
+ <p>To do this:</p>
279
+
280
+ <div class="tabs">
281
+ <div class="tab typescript active">
282
+ <span>Typescript</span>
283
+ </div>
284
+ <div class="tab javascript">
285
+ <span>Javascript</span>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="code-tabs">
290
+
291
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="p">@</span><span class="nd">Model</span><span class="p">()</span>
292
+ <span class="kd">class</span> <span class="nc">Person</span> <span class="kd">extends</span> <span class="nc">ApplicationRecord</span> <span class="p">{</span>
293
+ <span class="k">static</span> <span class="nx">clientApplication</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">sales-backend</span><span class="dl">"</span>
294
+ <span class="p">}</span></code></pre></figure>
295
+
296
+ <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="nx">ApplicationRecord</span><span class="p">.</span><span class="nf">extend</span><span class="p">({</span>
297
+ <span class="na">static</span><span class="p">:</span> <span class="p">{</span>
298
+ <span class="na">clientApplication</span><span class="p">:</span> <span class="dl">"</span><span class="s2">sales-backend</span><span class="dl">"</span>
299
+ <span class="p">}</span>
300
+ <span class="p">})</span></code></pre></figure>
301
+
302
+ </div>
303
+
304
+ <h4 id="defining-attributes">Defining Attributes</h4>
305
+
306
+ <p><code class="language-plaintext highlighter-rouge">ActiveRecord</code> automatically sets attributes by introspecting database
307
+ columns. We could do the same - <code class="language-plaintext highlighter-rouge">swagger.json</code> is our schema - but tend
308
+ to agree with those who feel this aspect of <code class="language-plaintext highlighter-rouge">ActiveRecord</code> is a bit too
309
+ “magical”. In addition, explicitly defining our attributes can be used
310
+ to track which applications are using which attributes of the API.</p>
311
+
312
+ <p>Though this is configurable, by default we expect the API to be
313
+ <code class="language-plaintext highlighter-rouge">under_scored</code> and attributes to be <code class="language-plaintext highlighter-rouge">camelCased</code>.</p>
314
+
315
+ <div class="tabs">
316
+ <div class="tab typescript active">
317
+ <span>Typescript</span>
318
+ </div>
319
+ <div class="tab javascript">
320
+ <span>Javascript</span>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="code-tabs">
325
+
326
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="p">@</span><span class="nd">Model</span><span class="p">()</span>
327
+ <span class="kd">class</span> <span class="nc">Person</span> <span class="kd">extends</span> <span class="nc">ApplicationRecord</span> <span class="p">{</span>
328
+ <span class="c1">// ... code ...</span>
329
+ <span class="p">@</span><span class="nd">Attr</span><span class="p">()</span> <span class="nx">firstName</span><span class="p">:</span> <span class="kr">string</span>
330
+ <span class="p">@</span><span class="nd">Attr</span><span class="p">()</span> <span class="nx">lastName</span><span class="p">:</span> <span class="kr">string</span>
331
+ <span class="p">@</span><span class="nd">Attr</span><span class="p">()</span> <span class="nx">age</span><span class="p">:</span> <span class="kr">number</span>
332
+
333
+ <span class="kd">get</span> <span class="nf">fullName</span><span class="p">()</span> <span class="p">:</span> <span class="kr">string</span> <span class="p">{</span>
334
+ <span class="k">return</span> <span class="s2">`</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">firstName</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">lastName</span><span class="p">}</span><span class="s2">`</span>
335
+ <span class="p">}</span>
336
+ <span class="p">}</span>
337
+
338
+ <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="s2">John</span><span class="dl">"</span> <span class="p">})</span>
339
+ <span class="nx">person</span><span class="p">.</span><span class="nx">firstName</span> <span class="c1">// "John"</span>
340
+ <span class="nx">person</span><span class="p">.</span><span class="nx">lastName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Doe</span><span class="dl">"</span>
341
+ <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span> <span class="c1">// { firstName: "John", lastName: "Doe" }</span>
342
+ <span class="nx">person</span><span class="p">.</span><span class="nx">fullName</span> <span class="c1">// "John Doe"</span></code></pre></figure>
343
+
344
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">attr</span> <span class="o">=</span> <span class="nx">spraypaint</span><span class="p">.</span><span class="nx">attr</span>
345
+ <span class="kd">const</span> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">ApplicationRecord</span><span class="p">.</span><span class="nf">extend</span><span class="p">({</span>
346
+ <span class="c1">// ... code ...</span>
347
+ <span class="na">attrs</span><span class="p">:</span> <span class="p">{</span>
348
+ <span class="na">firstName</span><span class="p">:</span> <span class="nf">attr</span><span class="p">(),</span>
349
+ <span class="na">lastName</span><span class="p">:</span> <span class="nf">attr</span><span class="p">(),</span>
350
+ <span class="na">age</span><span class="p">:</span> <span class="nf">attr</span><span class="p">()</span>
351
+ <span class="p">},</span>
352
+ <span class="na">methods</span><span class="p">:</span> <span class="p">{</span>
353
+ <span class="na">fullName</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
354
+ <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">firstName</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> </span><span class="dl">"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">lastName</span><span class="p">;</span>
355
+ <span class="p">}</span>
356
+ <span class="p">}</span>
357
+ <span class="p">})</span>
358
+
359
+ <span class="kd">var</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="s2">John</span><span class="dl">"</span> <span class="p">})</span>
360
+ <span class="nx">person</span><span class="p">.</span><span class="nx">firstName</span> <span class="c1">// "John"</span>
361
+ <span class="nx">person</span><span class="p">.</span><span class="nx">lastName</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Doe</span><span class="dl">"</span>
362
+ <span class="nx">person</span><span class="p">.</span><span class="nx">attributes</span> <span class="c1">// { firstName: "John", lastName: "Doe" }</span>
363
+ <span class="nx">person</span><span class="p">.</span><span class="nf">fullName</span><span class="p">()</span> <span class="c1">// "John Doe"</span></code></pre></figure>
364
+
365
+ </div>
366
+
367
+ <p>Attributes can be marked read-only, so they are never sent to the server
368
+ on a write request:</p>
369
+
370
+ <div class="tabs">
371
+ <div class="tab typescript active">
372
+ <span>Typescript</span>
373
+ </div>
374
+ <div class="tab javascript">
375
+ <span>Javascript</span>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="code-tabs">
380
+
381
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="p">@</span><span class="nd">Attr</span><span class="p">({</span> <span class="na">persist</span><span class="p">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="nx">createdAt</span><span class="p">:</span> <span class="kr">string</span>
382
+ <span class="p">@</span><span class="nd">Attr</span><span class="p">({</span> <span class="na">persist</span><span class="p">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="nx">updatedAt</span><span class="p">:</span> <span class="kr">string</span></code></pre></figure>
383
+
384
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">attrs</span><span class="p">:</span> <span class="p">{</span>
385
+ <span class="nl">createdAt</span><span class="p">:</span> <span class="nf">attr</span><span class="p">({</span> <span class="na">persist</span><span class="p">:</span> <span class="kc">false</span> <span class="p">}),</span>
386
+ <span class="nx">updatedAt</span><span class="p">:</span> <span class="nf">attr</span><span class="p">({</span> <span class="na">persist</span><span class="p">:</span> <span class="kc">false</span> <span class="p">})</span>
387
+ <span class="p">}</span></code></pre></figure>
388
+
389
+ </div>
390
+
391
+ <h4 id="defining-relationships">Defining Relationships</h4>
392
+
393
+ <p>Just like <code class="language-plaintext highlighter-rouge">ActiveRecord</code>, there are <code class="language-plaintext highlighter-rouge">HasMany</code>, <code class="language-plaintext highlighter-rouge">BelongsTo</code>, and
394
+ <code class="language-plaintext highlighter-rouge">HasOne</code> relationships:</p>
395
+
396
+ <div class="tabs">
397
+ <div class="tab typescript active">
398
+ <span>Typescript</span>
399
+ </div>
400
+ <div class="tab javascript">
401
+ <span>Javascript</span>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="code-tabs">
406
+
407
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="p">@</span><span class="nd">Model</span><span class="p">()</span>
408
+ <span class="kd">class</span> <span class="nc">Dog</span> <span class="kd">extends</span> <span class="nc">ApplicationRecord</span> <span class="p">{</span>
409
+ <span class="c1">// ... code ...</span>
410
+ <span class="p">@</span><span class="nd">BelongsTo</span><span class="p">()</span> <span class="nx">person</span><span class="p">:</span> <span class="nx">Person</span><span class="p">[]</span>
411
+ <span class="p">}</span>
412
+
413
+ <span class="kd">class</span> <span class="nc">Person</span> <span class="kd">extends</span> <span class="nc">ApplicationRecord</span> <span class="p">{</span>
414
+ <span class="c1">// ... code ...</span>
415
+ <span class="p">@</span><span class="nd">HasMany</span><span class="p">()</span> <span class="nx">dogs</span><span class="p">:</span> <span class="nx">Dog</span><span class="p">[]</span>
416
+ <span class="p">}</span></code></pre></figure>
417
+
418
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">hasMany</span> <span class="o">=</span> <span class="nx">spraypaint</span><span class="p">.</span><span class="nx">hasMany</span>
419
+ <span class="kd">const</span> <span class="nx">belongsTo</span> <span class="o">=</span> <span class="nx">spraypaint</span><span class="p">.</span><span class="nx">belongsTo</span>
420
+
421
+ <span class="kd">const</span> <span class="nx">Person</span> <span class="o">=</span> <span class="nx">ApplicationRecord</span><span class="p">.</span><span class="nf">extend</span><span class="p">({</span>
422
+ <span class="c1">// ... code ...</span>
423
+ <span class="na">attrs</span><span class="p">:</span> <span class="p">{</span>
424
+ <span class="na">dogs</span><span class="p">:</span> <span class="nf">hasMany</span><span class="p">()</span>
425
+ <span class="p">}</span>
426
+ <span class="p">})</span>
427
+
428
+ <span class="kd">const</span> <span class="nx">Dog</span> <span class="o">=</span> <span class="nx">ApplicationRecord</span><span class="p">.</span><span class="nf">extend</span><span class="p">({</span>
429
+ <span class="c1">// ... code ...</span>
430
+ <span class="na">attrs</span><span class="p">:</span> <span class="p">{</span>
431
+ <span class="na">person</span><span class="p">:</span> <span class="nf">belongsTo</span><span class="p">()</span>
432
+ <span class="p">}</span>
433
+ <span class="p">})</span></code></pre></figure>
434
+
435
+ </div>
436
+
437
+ <p>By default, we expect the relationship name to correspond to a
438
+ pluralized <code class="language-plaintext highlighter-rouge">jsonapiType</code> on a separate <code class="language-plaintext highlighter-rouge">Model</code>. If your models don’t
439
+ use this convention, feel free to supply it explicitly:</p>
440
+
441
+ <div class="tabs">
442
+ <div class="tab typescript active">
443
+ <span>Typescript</span>
444
+ </div>
445
+ <div class="tab javascript">
446
+ <span>Javascript</span>
447
+ </div>
448
+ </div>
449
+
450
+ <div class="code-tabs">
451
+
452
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="p">@</span><span class="nd">Model</span><span class="p">()</span>
453
+ <span class="kd">class</span> <span class="nc">Dog</span> <span class="kd">extends</span> <span class="nc">ApplicationRecord</span> <span class="p">{</span>
454
+ <span class="c1">// ... code ...</span>
455
+ <span class="p">@</span><span class="nd">BelongsTo</span><span class="p">(</span><span class="dl">'</span><span class="s1">people</span><span class="dl">'</span><span class="p">)</span> <span class="nx">owner</span><span class="p">:</span> <span class="nx">Person</span><span class="p">[]</span>
456
+ <span class="p">}</span>
457
+
458
+ <span class="c1">// alternatively, specify the class directly</span>
459
+
460
+ <span class="kd">class</span> <span class="nc">Dog</span> <span class="kd">extends</span> <span class="nc">ApplicationRecord</span> <span class="p">{</span>
461
+ <span class="c1">// ... code ...</span>
462
+ <span class="p">@</span><span class="nd">BelongsTo</span><span class="p">(</span><span class="nx">Person</span><span class="p">)</span> <span class="nx">owner</span><span class="p">:</span> <span class="nx">Person</span><span class="p">[]</span>
463
+ <span class="p">}</span></code></pre></figure>
464
+
465
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">const</span> <span class="nx">Dog</span> <span class="o">=</span> <span class="nx">ApplicationRecord</span><span class="p">.</span><span class="nf">extend</span><span class="p">({</span>
466
+ <span class="c1">// ... code ...</span>
467
+ <span class="na">attrs</span><span class="p">:</span> <span class="p">{</span>
468
+ <span class="na">owner</span><span class="p">:</span> <span class="nf">belongsTo</span><span class="p">(</span><span class="dl">'</span><span class="s1">people</span><span class="dl">'</span><span class="p">)</span>
469
+ <span class="p">}</span>
470
+ <span class="p">})</span></code></pre></figure>
471
+
472
+ </div>
473
+
474
+ <p>Relationships can be:</p>
475
+
476
+ <ul>
477
+ <li>Assigned via constructor</li>
478
+ <li>Assigned directly</li>
479
+ <li>Automatically loaded via <code class="language-plaintext highlighter-rouge">.includes()</code> (see <a href="/1.13/js/reads">reads</a>)</li>
480
+ <li>Saved in a single request <code class="language-plaintext highlighter-rouge">.save({ with: 'dogs' })</code> (see
481
+ <a href="/1.13/js/writes">writes</a>)</li>
482
+ </ul>
483
+
484
+ <div class="tabs">
485
+ <div class="tab typescript active">
486
+ <span>Typescript</span>
487
+ </div>
488
+ <div class="tab javascript">
489
+ <span>Javascript</span>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="code-tabs">
494
+
495
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="kd">let</span> <span class="nx">dog</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Dog</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Fido</span><span class="dl">"</span> <span class="p">})</span>
496
+ <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">dogs</span><span class="p">:</span> <span class="p">[</span><span class="nx">dog</span><span class="p">]</span> <span class="p">})</span>
497
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span> <span class="c1">// "Fido"</span>
498
+
499
+ <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>
500
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span> <span class="o">=</span> <span class="p">[</span><span class="nx">dog</span><span class="p">]</span>
501
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span> <span class="c1">// "Fido"</span>
502
+
503
+ <span class="c1">// Will auto-create Dog instance</span>
504
+ <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">dogs</span><span class="p">:</span> <span class="p">[{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Scooby</span><span class="dl">"</span> <span class="p">}]</span> <span class="p">})</span>
505
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span> <span class="c1">// "Scooby"</span>
506
+
507
+ <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">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">dogs</span><span class="dl">'</span><span class="p">)).</span><span class="nx">data</span>
508
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span> <span class="c1">// array of Dog instances from the server</span>
509
+ </code></pre></figure>
510
+
511
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">dog</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Dog</span><span class="p">({</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Fido</span><span class="dl">"</span> <span class="p">})</span>
512
+ <span class="kd">var</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">dogs</span><span class="p">:</span> <span class="p">[</span><span class="nx">dog</span><span class="p">]</span> <span class="p">})</span>
513
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span> <span class="c1">// "Fido"</span>
514
+
515
+ <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>
516
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span> <span class="o">=</span> <span class="p">[</span><span class="nx">dog</span><span class="p">]</span>
517
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span> <span class="c1">// "Fido"</span>
518
+
519
+ <span class="c1">// Will auto-create Dog instance</span>
520
+ <span class="kd">var</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">dogs</span><span class="p">:</span> <span class="p">[{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Scooby</span><span class="dl">"</span> <span class="p">}]</span> <span class="p">})</span>
521
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span> <span class="c1">// "Scooby"</span>
522
+
523
+ <span class="nx">Person</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">dogs</span><span class="dl">'</span><span class="p">).</span><span class="nf">then</span><span class="p">((</span><span class="nx">response</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span>
524
+ <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>
525
+ <span class="nx">person</span><span class="p">.</span><span class="nx">dogs</span> <span class="c1">// array of Dog instances from the server</span>
526
+ <span class="p">})</span>
527
+ </code></pre></figure>
528
+
529
+ </div>
530
+
531
+ <div class="clearfix">
532
+ <h2 id="next">
533
+ <a href="/1.13/js/reads">
534
+ NEXT:
535
+ <small>Reads</small>
536
+ &raquo;
537
+ </a>
538
+ </h2>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ </div>
544
+ </div>
545
+ </main>
546
+ <div class="main-footer main-footer--dark">
547
+ <div class="container">
548
+ <div class="row">
549
+ <div class="col-sm-4 menu">
550
+ <h3>Overview</h3>
551
+ <ul>
552
+ <li>
553
+ <a href="/1.13/quickstart">Quickstart</a>
554
+ </li>
555
+ <li>
556
+ <a href="/1.13/tutorial">Tutorial</a>
557
+ </li>
558
+ <li>
559
+ <a href="/1.13/guides">Guides</a>
560
+ </li>
561
+ </ul>
562
+ </div>
563
+ <div class="col-sm-4 menu">
564
+ <h3>Contact</h3>
565
+ <ul>
566
+ <li>
567
+ <a target="_blank" href="https://discord.gg/wgqkMBsSRV">Discord Chat</a>
568
+ </li>
569
+ <li>
570
+ <a href="mailto:richmolj@gmail.com">Email</a>
571
+ </li>
572
+ </ul>
573
+ </div>
574
+ <div class="col-sm-4 menu">
575
+ <h3>Related</h3>
576
+ <ul>
577
+ <li>
578
+ <a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
579
+ </li>
580
+ <li>
581
+ <a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
582
+ </li>
583
+ <li>
584
+ <a target="_blank" href="https://vuejs.org/">VueJS</a>
585
+ </li>
586
+ </ul>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </div>
591
+
592
+ <script type="text/javascript">
593
+ $(function () {
594
+
595
+ var flipTabs = function() {
596
+ var isTS = true;
597
+ if (localStorage.getItem('js-lang') === 'javascript') {
598
+ isTS = false;
599
+ }
600
+
601
+ $('.code-tabs').each(function(index, el) {
602
+ if (isTS) {
603
+ console.log('hiding js');
604
+ $($(el).children()[1]).hide();
605
+ $($(el).children()[0]).show();
606
+ } else {
607
+ console.log('hiding ts');
608
+ $($(el).children()[0]).hide();
609
+ $($(el).children()[1]).show();
610
+ }
611
+ });
612
+
613
+ if (isTS) {
614
+ $('.tab.typescript').addClass('active');
615
+ $('.tab.javascript').removeClass('active');
616
+ } else {
617
+ $('.tab.typescript').removeClass('active');
618
+ $('.tab.javascript').addClass('active');
619
+ }
620
+ }
621
+
622
+ $('.tab').click(function() {
623
+ if ($(this).hasClass('typescript')) {
624
+ localStorage.setItem('js-lang', 'typescript');
625
+ } else {
626
+ localStorage.setItem('js-lang', 'javascript');
627
+ }
628
+
629
+ flipTabs();
630
+ });
631
+
632
+ flipTabs();
633
+ })
634
+ </script>
635
+
636
+ </body>
637
+ </html>