graphiti-api · dlikhten · May 23, 2023
diff --git a/_includes/js-toc.html b/_includes/js-toc.html
@@ -24,4 +24,5 @@
 * [Authentication]({{ site.github.url }}/js/authentication)
 * [State Syncing]({{ site.github.url }}/js/state-syncing)
 * [Data Down, Actions Up]({{ site.github.url }}/js/ddau)
+* [Extra params]({{ site.github.url }}/js/extra-params)
 </div>
diff --git a/_site/feed.xml b/_site/feed.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.3.1">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" /><updated>2020-05-29T10:03:07-04:00</updated><id>/</id><title type="html">Graphiti</title><subtitle>Stylish Graph APIs
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.3.1">Jekyll</generator><link href="/feed.xml" rel="self" type="application/atom+xml" /><link href="/" rel="alternate" type="text/html" /><updated>2023-05-23T02:06:24-04:00</updated><id>/feed.xml</id><title type="html">Graphiti</title><subtitle>Stylish Graph APIs
 </subtitle><entry><title type="html">Tutorial Write-Ups Are Out!</title><link href="/2019/10/14/tutorial.html" rel="alternate" type="text/html" title="Tutorial Write-Ups Are Out!" /><published>2019-10-14T00:00:00-04:00</published><updated>2019-10-14T00:00:00-04:00</updated><id>/2019/10/14/tutorial</id><content type="html" xml:base="/2019/10/14/tutorial.html">&lt;p&gt;Though we’ve long had a &lt;a href=&quot;https://github.com/graphiti-api/employee_directory&quot;&gt;sample application&lt;/a&gt; with step-by-step diffs, we’ve been missing a full walkthrough. That now exists! Start with &lt;a href=&quot;https://www.graphiti.dev/tutorial/step_0&quot;&gt;Step 0: Bootstrapping&lt;/a&gt;.&lt;/p&gt;
 
 &lt;p&gt;These write-ups will tell you the relevant code and commands, but

diff --git a/_site/js/authentication.html b/_site/js/authentication.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/ddau.html b/_site/js/ddau.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/extra-params.html b/_site/js/extra-params.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
+
+  <link rel="apple-touch-icon" sizes="180x180" href="https://www.graphiti.dev/assets/favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="https://www.graphiti.dev/assets/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="https://www.graphiti.dev/assets/favicons/favicon-16x16.png">
+  <link rel="manifest" href="https://www.graphiti.dev/assets/favicons/site.webmanifest">
+  <link rel="mask-icon" href="https://www.graphiti.dev/assets/favicons/safari-pinned-tab.svg" color="#F86DA7">
+  <link rel="shortcut icon" href="https://www.graphiti.dev/assets/favicons/favicon.ico">
+  <meta name="msapplication-TileColor" content="#F86DA7">
+  <meta name="msapplication-config" content="https://www.graphiti.dev/assets/favicons/browserconfig.xml">
+  <meta name="theme-color" content="#F86DA7">
+
+  <title>Graphiti</title>
+  <meta name="description" content="Stylish Graph APIs">
+
+  <link rel="stylesheet" href="https://www.graphiti.dev/assets/main.css?ref=wh4t3v45">
+  <link rel="alternate" type="application/rss+xml" title="Graphiti" href="/feed.xml">
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127904727-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-127904727-1');
+  </script>
+
+  <!-- javascript -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
+
+</head>
+
+
+  <body>
+    <main class="page-content" aria-label="Content">
+      <div class="wrapper">
+        <header class="navbar navbar-inverse normal" role="banner">
+  <div class="container">
+    <div class="navbar-header">
+      <a href="https://www.graphiti.dev" class="navbar-brand">
+        <img alt="logo" src="/assets/img/logo.png">
+      </a>
+    </div>
+    <nav class="" role="navigation">
+      <ul class="nav navbar-nav nav-links">
+        <li>
+          <a class="quickstart nav-link" href="https://www.graphiti.dev/quickstart">Quickstart</a>
+        </li>
+        <li>
+          <a class="guides nav-link" href="https://www.graphiti.dev/guides">Guides</a>
+        </li>
+        <li>
+          <a class="tutorial nav-link" href="https://www.graphiti.dev/tutorial">Tutorial</a>
+        </li>
+        <li>
+          <a class="spraypaint nav-link" href="https://www.graphiti.dev/js">Spraypaint</a>
+        </li>
+      </ul>
+      <ul class="nav gh navbar-nav navbar-right visible-lg visible-md">
+        <li>
+          <span class="star">⭐</span>
+          <a href="https://github.com/graphiti-api/graphiti">
+            <img alt="github-star" style="margin-right: 65px;margin-top: -20px" src="/assets/img/gh.png">
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</header>
+
+        <div class="container">
+          <h1>
+  Spraypaint
+  <small>the isomorphic, framework-agnostic Graphiti ORM</small>
+</h1>
+
+<div class="js-toc col-md-3">
+  <ul>
+    <li><a href="https://www.graphiti.dev/js/index">Home</a></li>
+    <li><a href="https://www.graphiti.dev/js/introduction">Introduction</a></li>
+    <li><a href="https://www.graphiti.dev/js/installation">Installation</a>
+      <ul>
+        <li><a href="https://www.graphiti.dev/js/installation#typescript">Typescript</a></li>
+        <li><a href="https://www.graphiti.dev/js/installation#defining-models">Defining Models</a></li>
+        <li><a href="https://www.graphiti.dev/js/installation#connecting-to-the-api">Connecting to the API</a></li>
+        <li><a href="https://www.graphiti.dev/js/installation#defining-attributes">Defining Attributes</a></li>
+        <li><a href="https://www.graphiti.dev/js/installation#defining-relationships">Defining Relationships</a></li>
+      </ul>
+    </li>
+    <li><a href="https://www.graphiti.dev/js/reads">Reads</a>
+      <ul>
+        <li><a href="https://www.graphiti.dev/js/reads/sorting">Sorting</a></li>
+        <li><a href="https://www.graphiti.dev/js/reads/pagination">Pagination</a></li>
+        <li><a href="https://www.graphiti.dev/js/reads/filtering">Filtering</a></li>
+        <li><a href="https://www.graphiti.dev/js/reads/fieldsets">Fieldsets</a></li>
+        <li><a href="https://www.graphiti.dev/js/reads/statistics">Statistics</a></li>
+        <li><a href="https://www.graphiti.dev/js/reads/includes">Includes</a></li>
+        <li><a href="https://www.graphiti.dev/js/reads/nested-queries">Nested Queries</a></li>
+      </ul>
+    </li>
+    <li><a href="https://www.graphiti.dev/js/writes">Writes</a>
+      <ul>
+        <li><a href="https://www.graphiti.dev/js/writes/validations">Validations</a></li>
+        <li><a href="https://www.graphiti.dev/js/writes/dirty-tracking">Dirty Tracking</a></li>
+        <li><a href="https://www.graphiti.dev/js/writes/nested">Nested Writes</a></li>
+        <li><a href="https://www.graphiti.dev/js/writes/deferred">Deferred Action</a></li>
+      </ul>
+    </li>
+    <li><a href="https://www.graphiti.dev/js/middleware">Middleware</a></li>
+    <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
+    <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
+    <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
+  </ul>
+</div>
+
+<div class="col-md-8 col-md-offset-1">
+  <h3 id="extra-params">Extra Params</h3>
+
+  <p>Sometimes you need to submit params that are not standard jsonapi params. One great example would be
+<code class="highlighter-rouge">https://yourdomain.com/users?debug=true</code> which is not a param for the <code class="highlighter-rouge">UserResource</code> you may have, but
+might enable functionality in your controller as needed.</p>
+
+  <p>Invoking it is pretty straightforward, just invoke <code class="highlighter-rouge">extraParams</code> and pass in params and values you wish
+to add to your API call when executed.</p>
+
+  <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"><span class="nx">YourRecord</span><span class="p">.</span><span class="nx">extraParams</span><span class="p">({</span> <span class="na">debug</span><span class="p">:</span> <span class="kc">true</span> <span class="p">})</span></code></pre></figure>
+
+  <p>One common way to use this globally is to put this into a base class so it can be chained as part of 
+every resource.</p>
+
+  <div class="tabs">
+  <div class="tab typescript active">
+    <span>Typescript</span>
+  </div>
+  <div class="tab javascript">
+    <span>Javascript</span>
+  </div>
+</div>
+
+  <div class="code-tabs">
+
+    <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript">  <span class="err">@</span><span class="nx">Model</span>
+  <span class="k">export</span> <span class="kr">class</span> <span class="nx">ApplicationRecord</span> <span class="k">extends</span> <span class="nx">SpraypaintBase</span> <span class="p">{</span>
+    <span class="k">static</span> <span class="nx">withDebug</span><span class="o">&lt;</span><span class="nx">T</span> <span class="k">extends</span> <span class="nx">ApplicationRecord</span><span class="o">&gt;</span><span class="p">()</span><span class="err">:</span> <span class="nx">Scope</span><span class="o">&lt;</span><span class="nx">T</span><span class="o">&gt;</span> <span class="p">{</span>
+      <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">extraParams</span><span class="p">({</span> <span class="na">debug</span><span class="p">:</span> <span class="kc">true</span> <span class="p">})</span> <span class="k">as</span> <span class="nx">Scope</span><span class="o">&lt;</span><span class="nx">T</span><span class="o">&gt;</span><span class="p">;</span>
+    <span class="p">}</span>
+  <span class="p">}</span>
+  <span class="c1">// unfortunately you will need to pass in the </span>
+  <span class="c1">// implementing class' type as a generic</span>
+  <span class="nx">UserRecord</span><span class="p">.</span><span class="nx">withDebug</span><span class="o">&lt;</span><span class="nx">UserRecord</span><span class="o">&gt;</span><span class="p">().</span><span class="nx">all</span><span class="p">()</span>
+  </code></pre></figure>
+
+    <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript">  <span class="kr">const</span> <span class="nx">ApplicationRecord</span> <span class="o">=</span> <span class="nx">SpraypaintBase</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+    <span class="na">static</span><span class="p">:</span> <span class="p">{</span>
+      <span class="na">withDebug</span><span class="p">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">extraParams</span><span class="p">({</span> <span class="na">debug</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span>
+    <span class="p">}</span>
+  <span class="p">})</span>
+  <span class="nx">UserRecord</span><span class="p">.</span><span class="nx">withDebug</span><span class="p">().</span><span class="nx">all</span><span class="p">()</span>
+  </code></pre></figure>
+
+  </div>
+</div>
+
+        </div>
+      </div>
+    </main>
+    <div class="main-footer main-footer--dark">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-4 menu">
+        <h3>Overview</h3>
+        <ul>
+          <li>
+            <a href="https://www.graphiti.dev/quickstart">Quickstart</a>
+          </li>
+          <li>
+            <a href="https://www.graphiti.dev/tutorial">Tutorial</a>
+          </li>
+          <li>
+            <a href="https://www.graphiti.dev/guides">Guides</a>
+          </li>
+        </ul>
+      </div>
+      <div class="col-sm-4 menu">
+        <h3>Contact</h3>
+        <ul>
+          <li>
+            <a target="_blank" href="https://join.slack.com/t/graphiti-api/shared_invite/enQtMjkyMTA3MDgxNTQzLTU5MDI4MDllNTEzOTE1Nzk0ZGJlNTcxZDYzMGY2ZTczMDY2OWZhM2RmNTU0YWNiOWZhZDhkMmU4MzQ5NzIyNWM">Slack Chat</a>
+          </li>
+          <li>
+            <a href="mailto:[email protected]">Email</a>
+          </li>
+        </ul>
+      </div>
+      <div class="col-sm-4 menu">
+        <h3>Related</h3>
+        <ul>
+          <li>
+            <a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
+          </li>
+          <li>
+            <a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
+          </li>
+          <li>
+            <a target="_blank" href="https://vuejs.org/">VueJS</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+    <script type="text/javascript">
+$(function () {
+
+  var flipTabs = function() {
+    var isTS = true;
+    if (localStorage.getItem('js-lang') === 'javascript') {
+      isTS = false;
+    }
+
+    $('.code-tabs').each(function(index, el) {
+      if (isTS) {
+        console.log('hiding js');
+        $($(el).children()[1]).hide();
+        $($(el).children()[0]).show();
+      } else {
+        console.log('hiding ts');
+        $($(el).children()[0]).hide();
+        $($(el).children()[1]).show();
+      }
+    });
+
+    if (isTS) {
+      $('.tab.typescript').addClass('active');
+      $('.tab.javascript').removeClass('active');
+    } else {
+      $('.tab.typescript').removeClass('active');
+      $('.tab.javascript').addClass('active');
+    }
+  }
+
+  $('.tab').click(function() {
+    if ($(this).hasClass('typescript')) {
+      localStorage.setItem('js-lang', 'typescript');
+    } else {
+      localStorage.setItem('js-lang', 'javascript');
+    }
+
+    flipTabs();
+  });
+
+  flipTabs();
+})
+</script>
+
+  </body>
+</html>
diff --git a/_site/js/index.html b/_site/js/index.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/installation.html b/_site/js/installation.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/introduction.html b/_site/js/introduction.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/middleware.html b/_site/js/middleware.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/reads/fieldsets.html b/_site/js/reads/fieldsets.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/reads/filtering.html b/_site/js/reads/filtering.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/reads/includes.html b/_site/js/reads/includes.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/reads/index.html b/_site/js/reads/index.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/reads/nested-queries.html b/_site/js/reads/nested-queries.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/reads/pagination.html b/_site/js/reads/pagination.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/reads/sorting.html b/_site/js/reads/sorting.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>
 

diff --git a/_site/js/reads/statistics.html b/_site/js/reads/statistics.html
@@ -121,6 +121,7 @@ <h1>
     <li><a href="https://www.graphiti.dev/js/authentication">Authentication</a></li>
     <li><a href="https://www.graphiti.dev/js/state-syncing">State Syncing</a></li>
     <li><a href="https://www.graphiti.dev/js/ddau">Data Down, Actions Up</a></li>
+    <li><a href="https://www.graphiti.dev/js/extra-params">Extra params</a></li>
   </ul>
 </div>