davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Thinking in GraphQL (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://facebook.github.io/relay/docs/thinking-in-graphql.html">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Thinking in GraphQL (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://facebook.github.io/relay/docs/thinking-in-graphql.html">Source originale du contenu</a></h3>
    <p>GraphQL presents new ways for clients to fetch data by focusing on the needs of product developers and client applications. It provides a way for developers to specify the precise data needed for a view and enables a client to fetch that data in a single network request. Compared to traditional approaches such as REST, GraphQL helps applications to fetch data more efficiently (compared to resource-oriented REST approaches) and avoid duplication of server logic (which can occur with custom endpoints). Furthermore, GraphQL helps developers to decouple product code and server logic. For example, a product can fetch more or less information without requiring a change to every relevant server endpoint. It's a great way to fetch data.</p>

<p>In this article we'll explore what it means to build a GraphQL client framework and how this compares to clients for more traditional REST systems. Along the way we'll look at the design decisions behind Relay and see that it's not just a GraphQL client but also a framework for <em>declarative data-fetching</em>. Let's start at the beginning and fetch some data!</p>

<h2>Fetching Data <a class="hash-link" href="#fetching-data">#</a></h2>

<p>Imagine we have a simple application that fetches a list of stories, and some details about each one. Here's how that might look in resource-oriented REST:</p>

<pre class="prism language-javascript">
rest<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'/stories'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>stories <span class="token operator">=</span><span class="token operator">&gt;</span>

  Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>stories<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>story <span class="token operator">=</span><span class="token operator">&gt;</span>
    rest<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>story<span class="token punctuation">.</span>href<span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>stories <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>


  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stories<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre>

<p>Note that this approach requires <em>n+1</em> requests to the server: 1 to fetch the list, and <em>n</em> to fetch each item. With GraphQL we can fetch the same data in a single network request to the server (without creating a custom endpoint that we'd then have to maintain):</p>

<pre class="prism language-javascript">graphql<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`query { stories { id, text } }`</span></span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>
  stories <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>

    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>stories<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span></pre>

<p>So far we're just using GraphQL as a more efficient version of typical REST approaches. Note two important benefits in the GraphQL version:</p>

<ul><li>All data is fetched in a single round trip.</li><li>The client and server are decoupled: the client specifies the data needed instead of <em>relying on</em> the server endpoint to return the correct data.</li></ul>

<p>For a simple application that's already a nice improvement.</p>

<h2>Client Caching <a class="hash-link" href="#client-caching">#</a></h2>

<p>Repeatedly refetching information from the server can get quite slow. For example, navigating from the list of stories, to a list item, and back to the list of stories means we have to refetch the whole list. We'll solve this with the standard solution: <em>caching</em>.</p>

<p>In a resource-oriented REST system, we can maintain a <strong>response cache</strong> based on URIs:</p>

<pre class="prism language-javascript"><span class="token keyword">var</span> _cache <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
rest<span class="token punctuation">.</span><span class="token keyword">get</span> <span class="token operator">=</span> uri <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>_cache<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    _cache<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>uri<span class="token punctuation">,</span> <span class="token function">fetch</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> _cache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>uri<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre>

<p>Response-caching can also be applied to GraphQL. A basic approach would work similarly to the REST version. The text of the query itself can be used as a cache key:</p>

<pre class="prism language-javascript"><span class="token keyword">var</span> _cache <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
graphql<span class="token punctuation">.</span><span class="token keyword">get</span> <span class="token operator">=</span> queryText <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>_cache<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>queryText<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    _cache<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>queryText<span class="token punctuation">,</span> <span class="token function">fetchGraphQL</span><span class="token punctuation">(</span>queryText<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> _cache<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>queryText<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre>

<p>Now, requests for previously cached data can be answered immediately without making a network request. This is a practical approach to improving the perceived performance of an application. However, this method of caching can cause problems with data consistency.</p>

<h2>Cache Consistency <a class="hash-link" href="#cache-consistency">#</a></h2>

<p>With GraphQL it is very common for the results of multiple queries to overlap. However, our response cache from the previous section doesn't account for this overlap — it caches based on distinct queries. For example, if we issue a query to fetch stories:</p>

<pre class="prism language-javascript">query <span class="token punctuation">{</span> stories <span class="token punctuation">{</span> id<span class="token punctuation">,</span> text<span class="token punctuation">,</span> likeCount <span class="token punctuation">}</span> <span class="token punctuation">}</span></pre>

<p>and then later refetch one of the stories whose <code>likeCount</code> has since been incremented:</p>

<pre class="prism language-javascript">query <span class="token punctuation">{</span> <span class="token function">story</span><span class="token punctuation">(</span>id<span class="token punctuation">:</span> <span class="token string">"123"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> text<span class="token punctuation">,</span> likeCount <span class="token punctuation">}</span> <span class="token punctuation">}</span></pre>

<p>We'll now see different <code>likeCount</code>s depending on how the story is accessed. A view that uses the first query will see an outdated count, while a view using the second query will see the updated count.</p>

<h3>Caching A Graph <a class="hash-link" href="#caching-a-graph">#</a></h3>

<p>The solution to caching GraphQL is to normalize the hierarchical response into a flat collection of <strong>records</strong>. Relay implements this cache as a map from IDs to records. Each record is a map from field names to field values. Records may also link to other records (allowing it to describe a cyclic graph), and these links are stored as a special value type that references back into the top-level map. With this approach each server record is stored <em>once</em> regardless of how it is fetched.</p>

<p>Here's an example query that fetches a story's text and its author's name:</p>

<pre class="prism language-javascript">query <span class="token punctuation">{</span>
  <span class="token function">story</span><span class="token punctuation">(</span>id<span class="token punctuation">:</span> <span class="token string">"1"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    text<span class="token punctuation">,</span>
    author <span class="token punctuation">{</span>
      name
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></pre>

<p>And here's a possible response:</p>

<pre class="prism language-javascript">query<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  story<span class="token punctuation">:</span> <span class="token punctuation">{</span>
     text<span class="token punctuation">:</span> <span class="token string">"Relay is open-source!"</span><span class="token punctuation">,</span>
     author<span class="token punctuation">:</span> <span class="token punctuation">{</span>
       name<span class="token punctuation">:</span> <span class="token string">"Jan"</span>
     <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></pre>

<p>Although the response is hierarchical, we'll cache it by flattening all the records. Here is an example of how Relay would cache this query response:</p>

<pre class="prism language-javascript">Map <span class="token punctuation">{</span>

  <span class="token number">1</span><span class="token punctuation">:</span> Map <span class="token punctuation">{</span>
    text<span class="token punctuation">:</span> <span class="token string">'Relay is open-source!'</span><span class="token punctuation">,</span>
    author<span class="token punctuation">:</span> <span class="token function">Link</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token number">2</span><span class="token punctuation">:</span> Map <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'Jan'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre>

<p>This is only a simple example: in reality the cache must handle one-to-many associations and pagination (among other things).</p>

<h3>Using The Cache <a class="hash-link" href="#using-the-cache">#</a></h3>

<p>So how do we use this cache? Let's look at two operations: writing to the cache when a response is received, and reading from the cache to determine if a query can be fulfilled locally (the equivalent to <code>_cache.has(key)</code> above, but for a graph).</p>

<h3>Populating The Cache <a class="hash-link" href="#populating-the-cache">#</a></h3>

<p>Populating the cache involves walking a hierarchical GraphQL response and creating or updating normalized cache records. At first it may seem that the response alone is sufficient to process the response, but in fact this is only true for very simple queries. Consider <code>user(id: "456") { photo(size: 32) { uri } }</code> — how should we store <code>photo</code>? Using <code>photo</code> as the field name in the cache won't work because a different query might fetch the same field but with different argument values (e.g. <code>photo(size: 64) {...}</code>). A similar issue occurs with pagination. If we fetch the 11th to 20th stories with <code>stories(first: 10, offset: 10)</code>, these new results should be <em>appended</em> to the existing list.</p>

<p>Therefore, a normalized response cache for GraphQL requires processing payloads and queries in parallel. For example, the <code>photo</code> field from above might be cached with a generated field name such as <code>photo_size(32)</code> in order to uniquely identify the field and its argument values.</p>

<h3>Reading From Cache <a class="hash-link" href="#reading-from-cache">#</a></h3>

<p>To read from the cache we can walk a query and resolve each field. But wait: that sounds <em>exactly</em> like what a GraphQL server does when it processes a query. And it is! Reading from the cache is a special case of an executor where a) there's no need for user-defined field functions because all results come from a fixed data structure and b) results are always synchronous — we either have the data cached or we don't.</p>

<p>Relay implements several variations of <strong>query traversal</strong>: operations that walk a query alongside some other data such as the cache or a response payload. For example, when a query is fetched Relay performs a "diff" traversal to determine what fields are missing (much like React diffs virtual DOM trees). This can reduce the amount of data fetched in many common cases and even allow Relay to avoid network requests at all when queries are fully cached.</p>

<h3>Cache Updates <a class="hash-link" href="#cache-updates">#</a></h3>

<p>Note that this normalized cache structure allows overlapping results to be cached without duplication. Each record is stored once regardless of how it is fetched. Let's return to the earlier example of inconsistent data and see how this cache helps in that scenario.</p>

<p>The first query was for a list of stories:</p>

<pre class="prism language-javascript">query <span class="token punctuation">{</span> stories <span class="token punctuation">{</span> id<span class="token punctuation">,</span> text<span class="token punctuation">,</span> likeCount <span class="token punctuation">}</span> <span class="token punctuation">}</span></pre>

<p>With a normalized response cache, a record would be created for each story in the list. The <code>stories</code> field would store links to each of these records.</p>

<p>The second query refetched the information for one of those stories:</p>

<pre class="prism language-javascript">query <span class="token punctuation">{</span> <span class="token function">story</span><span class="token punctuation">(</span>id<span class="token punctuation">:</span> <span class="token string">"123"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> id<span class="token punctuation">,</span> text<span class="token punctuation">,</span> likeCount <span class="token punctuation">}</span> <span class="token punctuation">}</span></pre>

<p>When this response is normalized, Relay can detect that this result overlaps with existing data based on its <code>id</code>. Rather than create a new record, Relay will update the existing <code>123</code> record. The new <code>likeCount</code> is therefore available to <em>both</em> queries, as well as any other query that might reference this story.</p>

<h2>Data/View Consistency <a class="hash-link" href="#data-view-consistency">#</a></h2>

<p>A normalized cache ensures that the <em>cache</em> is consistent. But what about our views? Ideally, our React views would always reflect the current information from the cache.</p>

<p>Consider rendering the text and comments of a story along with the corresponding author names and photos. Here's the GraphQL query:</p>

<pre class="prism language-javascript">query <span class="token punctuation">{</span>
  <span class="token function">node</span><span class="token punctuation">(</span>id<span class="token punctuation">:</span> <span class="token string">"1"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    text<span class="token punctuation">,</span>
    author <span class="token punctuation">{</span> name<span class="token punctuation">,</span> photo <span class="token punctuation">}</span><span class="token punctuation">,</span>
    comments <span class="token punctuation">{</span>
      text<span class="token punctuation">,</span>
      author <span class="token punctuation">{</span> name<span class="token punctuation">,</span> photo <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></pre>

<p>After initially fetching this story our cache might be as follows. Note that the story and comment both link to the same record as <code>author</code>:</p>

<pre class="prism language-javascript">

Map <span class="token punctuation">{</span>

  <span class="token number">1</span><span class="token punctuation">:</span> Map <span class="token punctuation">{</span>
    author<span class="token punctuation">:</span> <span class="token function">Link</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    comments<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">Link</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token number">2</span><span class="token punctuation">:</span> Map <span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'Yuzhi'</span><span class="token punctuation">,</span>
    photo<span class="token punctuation">:</span> <span class="token string">'http://.../photo1.jpg'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>

  <span class="token number">3</span><span class="token punctuation">:</span> Map <span class="token punctuation">{</span>
    author<span class="token punctuation">:</span> <span class="token function">Link</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></pre>

<p>The author of this story also commented on it — quite common. Now imagine that some other view fetches new information about the author, and her profile photo has changed to a new URI. Here's the <em>only</em> part of our cached data that changes:</p>

<pre class="prism language-javascript">Map <span class="token punctuation">{</span>
  <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
  <span class="token number">2</span><span class="token punctuation">:</span> Map <span class="token punctuation">{</span>
    <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
    photo<span class="token punctuation">:</span> <span class="token string">'http://.../photo2.jpg'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></pre>

<p>The value of the <code>photo</code> field has changed; and therefore the record <code>2</code> has also changed. And that's it. Nothing else in the <em>cache</em> is affected. But clearly our <em>view</em> needs to reflect the update: both instances of the author in the UI (as story author and comment author) need to show the new photo.</p>

<p>A standard response is to "just use immutable data structures" — but let's see what would happen if we did:</p>

<pre class="prism language-javascript">ImmutableMap <span class="token punctuation">{</span>
  <span class="token number">1</span><span class="token punctuation">:</span> ImmutableMap <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token number">2</span><span class="token punctuation">:</span> ImmutableMap <span class="token punctuation">{</span>
    <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>
    photo<span class="token punctuation">:</span> <span class="token string">'http://.../photo2.jpg'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token number">3</span><span class="token punctuation">:</span> ImmutableMap <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span></pre>

<p>If we replace <code>2</code> with a new immutable record, we'll also get a new immutable instance of the cache object. However, records <code>1</code> and <code>3</code> are untouched. Because the data is normalized, we can't tell that <code>story</code>'s contents have changed just by looking at the <code>story</code> record alone.</p>

<h3>Achieving View Consistency <a class="hash-link" href="#achieving-view-consistency">#</a></h3>

<p>There are a variety of solutions for keeping views up to date with a flattened cache. The approach that Relay takes is to maintain a mapping from each UI view to the set of IDs it references. In this case, the story view would subscribe to updates on the story (<code>1</code>), the author (<code>2</code>), and the comments (<code>3</code> and any others). When writing data into the cache, Relay tracks which IDs are affected and notifies <em>only</em> the views that are subscribed to those IDs. The affected views re-render, and unaffected views opt-out of re-rendering for better performance (Relay provides a safe but effective default <code>shouldComponentUpdate</code>). Without this strategy, every view would re-render for even the tiniest change.</p>

<p>Note that this solution will also work for <em>writes</em>: any update to the cache will notify the affected views, and writes are just another thing that updates the cache.</p>

<h2>Mutations <a class="hash-link" href="#mutations">#</a></h2>

<p>So far we've looked at the process of querying data and keeping views up to date, but we haven't looked at writes. In GraphQL, writes are called <strong>mutations</strong>. We can think of them as queries with side effects. Here's an example of calling a mutation that might mark a given story as being liked by the current user:</p>

<pre class="prism language-javascript">

mutation <span class="token function">StoryLike</span><span class="token punctuation">(</span>$storyID<span class="token punctuation">:</span> String<span class="token punctuation">)</span> <span class="token punctuation">{</span>

   <span class="token function">storyLike</span><span class="token punctuation">(</span>storyID<span class="token punctuation">:</span> $storyID<span class="token punctuation">)</span> <span class="token punctuation">{</span>

     likeCount
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span></pre>

<p>Notice that we're querying for data that <em>may</em> have changed as a result of the mutation. An obvious question is: why can't the server just tell us what changed? The answer is: it's complicated. GraphQL abstracts over <em>any</em> data storage layer (or an aggregation of multiple sources), and works with any programming language. Furthermore, the goal of GraphQL is to provide data in a form that is useful to product developers building a view.</p>

<p>We've found that it's common for the GraphQL schema to differ slightly or even substantially from the form in which data is stored on disk. Put simply: there isn't always a 1:1 correspondence between data changes in your underlying <em>data storage</em> (disk) and data changes in your <em>product-visible schema</em> (GraphQL). The perfect example of this is privacy: returning a user-facing field such as <code>age</code> might require accessing numerous records in our data-storage layer to determine if the active user is even allowed to <em>see</em> that <code>age</code> (Are we friends? Is my age shared? Did I block you? etc.).</p>

<p>Given these real-world constraints, the approach in GraphQL is for clients to query for things that may change after a mutation. But what exactly do we put in that query? During the development of Relay we explored several ideas — let's look at them briefly in order to understand why Relay uses the approach that it does:</p>

<ul><li><p>Option 1: Re-fetch everything that the app has ever queried. Even though only a small subset of this data will actually change, we'll still have to wait for the server to execute the <em>entire</em> query, wait to download the results, and wait to process them again. This is very inefficient.</p></li><li><p>Option 2: Re-fetch only the queries required by actively rendered views. This is a slight improvement over option 1. However, cached data that <em>isn't</em> currently being viewed won't be updated. Unless this data is somehow marked as stale or evicted from the cache subsequent queries will read outdated information.</p></li><li><p>Option 3: Re-fetch a fixed list of fields that <em>may</em> change after the mutation. We'll call this list a <strong>fat query</strong>. We found this to also be inefficient because typical applications only render a subset of the fat query, but this approach would require fetching all of those fields.</p></li><li><p>Option 4 (Relay): Re-fetch the intersection of what may change (the fat query) and the data in the cache. In addition to the cache of data Relay also remembers the queries used to fetch each item. These are called <strong>tracked queries</strong>. By intersecting the tracked and fat queries, Relay can query exactly the set of information the application needs to update and nothing more.</p></li></ul>

<h2>Data-Fetching APIs <a class="hash-link" href="#data-fetching-apis">#</a></h2>

<p>So far we looked at the lower-level aspects of data-fetching and saw how various familiar concepts translate to GraphQL. Next, let's step back and look at some higher-level concerns that product developers often face around data-fetching:</p>

<ul><li>Fetching all the data for a view hierarchy.</li><li>Managing asynchronous state transitions and coordinating concurrent requests.</li><li>Managing errors.</li><li>Retrying failed requests.</li><li>Updating the local cache after receiving query/mutation responses.</li><li>Queuing mutations to avoid race conditions.</li><li>Optimistically updating the UI while waiting for the server to respond to mutations.</li></ul>

<p>We've found that typical approaches to data-fetching — with imperative APIs — force developers to deal with too much of this non-essential complexity. For example, consider <em>optimistic UI updates</em>. This is a way of giving the user feedback while waiting for a server response. The logic of <em>what</em> to do can be quite clear: when the user clicks "like", mark the story as being liked and send the request to the server. But the implementation is often much more complex. Imperative approaches require us to implement all of those steps: reach into the UI and toggle the button, initiate a network request, retry it if necessary, show an error if it fails (and untoggle the button), etc. The same goes for data-fetching: specifying <em>what</em> data we need often dictates <em>how</em> and <em>when</em> it is fetched. Next, we'll explore our approach to solving these concerns with <strong>Relay</strong>.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://facebook.github.io/relay/docs/thinking-in-graphql.html">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>