CINXE.COM
<!doctype html> <html lang="en" dir="ltr" class="plugin-pages plugin-id-default" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v2.4.3"> <title data-rh="true">Relay</title><meta data-rh="true" property="og:title" content="Relay"><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://relay.dev/img/relay.png"><meta data-rh="true" name="twitter:image" content="https://relay.dev/img/relay.png"><meta data-rh="true" property="og:url" content="https://relay.dev/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><link data-rh="true" rel="icon" href="/img/favicon.png"><link data-rh="true" rel="canonical" href="https://relay.dev/"><link data-rh="true" rel="alternate" href="https://relay.dev/" hreflang="en"><link data-rh="true" rel="alternate" href="https://relay.dev/" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://UBPJPW35NS-dsn.algolia.net" crossorigin="anonymous"><script data-rh="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("__docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/</span> (default value)</p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Relay RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Relay Atom Feed"> <link rel="preconnect" href="https://www.google-analytics.com"> <script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","G-DCSC7FDGL5","auto"),ga("send","pageview")</script> <script async src="https://www.google-analytics.com/analytics.js"></script> <link rel="preconnect" href="https://www.google-analytics.com"> <link rel="preconnect" href="https://www.googletagmanager.com"> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DCSC7FDGL5"></script> <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-DCSC7FDGL5",{})</script> <link rel="search" type="application/opensearchdescription+xml" title="Relay" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.7094010d.css"> <link rel="preload" href="/assets/js/runtime~main.2266fe68.js" as="script"> <link rel="preload" href="/assets/js/main.e1696ef0.js" as="script"> </head> <body class="navigation-with-keyboard"> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script> <div style="display: none; text-align: center; background-color: white; color: black;" id="internaldocs-banner"></div><div id="__docusaurus"> <div id="__docusaurus-base-url-issue-banner-container"></div><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top navbar--primary"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title text--truncate">Relay</b></a><a class="navbar__item navbar__link" href="/docs/">Docs</a><a class="navbar__item navbar__link" href="/blog/">Blog</a><a class="navbar__item navbar__link" href="/help/">Help</a><a href="https://github.com/facebook/relay" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/docs/">v18.0.0</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/">Next 馃毀</a></li><li><a class="dropdown__link" href="/docs/">v18.0.0</a></li><li><a class="dropdown__link" href="/docs/v17.0.0/">v17.0.0</a></li><li><a class="dropdown__link" href="/docs/v16.0.0/">v16.0.0</a></li><li><a class="dropdown__link" href="/docs/v15.0.0/">v15.0.0</a></li><li><a class="dropdown__link" href="/docs/v14.0.0/">v14.0.0</a></li><li><a class="dropdown__link" href="/docs/v13.0.0/">v13.0.0</a></li><li><a class="dropdown__link" href="/versions/">All versions</a></li></ul></div><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_ZlJk"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div><div><div><div class="homeBanner">Support Ukraine 馃嚭馃嚘<!-- --> <a href="https://opensource.facebook.com/support-ukraine" target="_blank" rel="noopener noreferrer">Help Provide Humanitarian Aid to Ukraine</a>.</div></div><div class="homeContainer"><div class="homeSplashFade"><div class="logo"><img src="/img/relay-white.svg"></div><div class="wrapper homeWrapper"><h2 class="projectTitle">Relay<small>The GraphQL client that scales with you.</small><small></small></h2></div></div></div></div><div class="homePage mainContainer"><div class="container textSection lightBackground"><div class="wrapper"><h2>Built for scale</h2><p>Relay is designed for high performance at any scale. Relay keeps management of data-fetching easy, whether your app has tens, hundreds, or thousands of components. And thanks to Relay鈥檚 incremental compiler, it keeps your iteration speed fast even as your app grows.</p><div class="gridBlock"><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Keeps iteration quick</h2><span><p>Relay is data-fetching turned <b>declarative</b>. Components declare their data dependencies, without worrying about how to fetch them. Relay guarantees that the data each component needs is fetched and available. This keeps components decoupled and promotes reuse.</p><p>With Relay, components and their data dependencies can be quickly modified without modifying other parts of the system. That means you won't accidentally break other components as you refactor or make changes to your app.</p></span></div></div><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Automatic optimizations</h2><span><p>Relay's compiler aggregates and optimizes the data requirements for your entire app, so that they can be efficiently fetched in a single GraphQL request.</p><p>Relay handles the heavy lifting to ensure the data declared by your components is fetched in the most efficient way. For example, by deduplicating identical fields, and precomputing information used at runtime, among other optimizations.</p></span></div></div><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Data consistency</h2><span><p>Relay automatically keeps all of your components up to date when data that affects them changes, and efficiently updates them only when strictly necessary. This means no unnecessary re-renders.</p><p>Relay also supports executing GraphQL Mutations, optionally with optimistic updates, and updates to local data, while ensuring that visible data on the screen is always kept up to date.</p></span></div></div></div></div></div><div class="container exampleSection darkBackground"><div class="wrapper"><div class="wrapperInner"><div class="radiusRight"><h2>Fetching query data</h2><p>The simplest way to fetch query data is to directly call<!-- --> <a href="/docs/api-reference/load-query/"><code>loadQuery</code></a>.</p><p>Later, you can read the data from the store in a functional React component by calling the <a href="/docs/api-reference/use-preloaded-query/"><code>usePreloadedQuery</code></a> hook.</p><p>Relay encourages you to call <a href="/docs/api-reference/load-query/"><code>loadQuery</code></a> in response to an event, such as when a user presses on a link to navigate to a particular page or presses a button. See the guided tour section on <a href="/docs/guided-tour/rendering/queries/">Queries</a> for more.</p></div><div class="radiusLeft"><pre class="outerPre"><pre style="white-space:pre;margin:0"><code class="language-jsx" style="white-space:pre;color:#403f53"><span> </span><span></span><span class="token token module" style="color:#590000">import</span><span> </span><span class="token token imports" style="color:#081686">React</span><span> </span><span class="token token module" style="color:#590000">from</span><span> </span><span class="token token" style="color:#590000">"react"</span><span class="token token" style="color:#403f53">;</span><span> </span><span></span><span class="token token module" style="color:#590000">import</span><span> </span><span class="token token" style="color:#403f53">{</span><span> graphql</span><span class="token token" style="color:#403f53">,</span><span> usePreloadedQuery</span><span class="token token" style="color:#403f53">,</span><span> </span><span class="token token" style="color:#444">/* ... */</span><span> </span><span class="token token" style="color:#403f53">}</span><span> </span><span class="token token module" style="color:#590000">from</span><span> </span><span class="token token" style="color:#590000">"react-relay"</span><span class="token token" style="color:#403f53">;</span><span> </span> <span></span><span class="token token" style="color:#590000">const</span><span> artistsQuery </span><span class="token token" style="color:#793735">=</span><span> graphql</span><span class="token token template-string template-punctuation" style="color:#590000">`</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#590000">query</span><span class="token token template-string graphql language-graphql"> ArtistQuery</span><span class="token token template-string graphql language-graphql" style="color:#403f53">(</span><span class="token token template-string graphql language-graphql variable">$artistID</span><span class="token token template-string graphql language-graphql" style="color:#403f53">:</span><span class="token token template-string graphql language-graphql"> String</span><span class="token token template-string graphql language-graphql" style="color:#793735">!</span><span class="token token template-string graphql language-graphql" style="color:#403f53">)</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#403f53">{</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> artist</span><span class="token token template-string graphql language-graphql" style="color:#403f53">(</span><span class="token token template-string graphql language-graphql" style="color:#081686">id</span><span class="token token template-string graphql language-graphql" style="color:#403f53">:</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql variable">$artistID</span><span class="token token template-string graphql language-graphql" style="color:#403f53">)</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#403f53">{</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> name </span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#793735">...</span><span class="token token template-string graphql language-graphql fragment function">ArtistDescription_artist</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#403f53">}</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#403f53">}</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"></span><span class="token token template-string template-punctuation" style="color:#590000">`</span><span class="token token" style="color:#403f53">;</span><span> </span><span></span><span class="token token" style="color:#590000">const</span><span> artistsQueryReference </span><span class="token token" style="color:#793735">=</span><span> </span><span class="token token function">loadQuery</span><span class="token token" style="color:#403f53">(</span><span> </span><span> environment</span><span class="token token" style="color:#403f53">,</span><span> </span><span> artistsQuery</span><span class="token token" style="color:#403f53">,</span><span> </span><span> </span><span class="token token" style="color:#403f53">{</span><span>artistID</span><span class="token token" style="color:#793735">:</span><span> </span><span class="token token" style="color:#590000">"1"</span><span class="token token" style="color:#403f53">}</span><span> </span><span></span><span class="token token" style="color:#403f53">)</span><span class="token token" style="color:#403f53">;</span><span> </span> <span></span><span class="token token module" style="color:#590000">export</span><span> </span><span class="token token module" style="color:#590000">default</span><span> </span><span class="token token" style="color:#590000">function</span><span> </span><span class="token token function" style="color:#081686">ArtistPage</span><span class="token token" style="color:#403f53">(</span><span class="token token" style="color:#403f53">)</span><span> </span><span class="token token" style="color:#403f53">{</span><span> </span><span> </span><span class="token token control-flow" style="color:#590000">return</span><span> </span><span class="token token" style="color:#403f53">(</span><span> </span><span> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">EnvironmentProvider</span><span class="token token" style="color:#6a0352"> </span><span class="token token" style="color:#081686">environment</span><span class="token token script language-javascript script-punctuation" style="color:#6a0352">=</span><span class="token token script language-javascript" style="color:#403f53">{</span><span class="token token script language-javascript" style="color:#6a0352">environment</span><span class="token token script language-javascript" style="color:#403f53">}</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">React.Suspense</span><span class="token token" style="color:#6a0352"> </span><span class="token token" style="color:#081686">fallback</span><span class="token token script language-javascript script-punctuation" style="color:#6a0352">=</span><span class="token token script language-javascript" style="color:#403f53">{</span><span class="token token script language-javascript" style="color:#403f53"><</span><span class="token token script language-javascript" style="color:#081686">LoadingIndicator</span><span class="token token script language-javascript" style="color:#6a0352"> </span><span class="token token script language-javascript" style="color:#403f53">/></span><span class="token token script language-javascript" style="color:#403f53">}</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">ArtistView</span><span class="token token" style="color:#6a0352"> </span><span class="token token" style="color:#403f53">/></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"></</span><span class="token token" style="color:#081686">React.Suspense</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"></</span><span class="token token" style="color:#081686">EnvironmentProvider</span><span class="token token" style="color:#403f53">></span><span> </span><span> </span><span class="token token" style="color:#403f53">)</span><span> </span><span></span><span class="token token" style="color:#403f53">}</span><span> </span> <span></span><span class="token token" style="color:#590000">function</span><span> </span><span class="token token function" style="color:#081686">ArtistView</span><span class="token token" style="color:#403f53">(</span><span class="token token" style="color:#403f53">)</span><span> </span><span class="token token" style="color:#403f53">{</span><span> </span><span> </span><span class="token token" style="color:#590000">const</span><span> data </span><span class="token token" style="color:#793735">=</span><span> </span><span class="token token function">usePreloadedQuery</span><span class="token token" style="color:#403f53">(</span><span>artistsQuery</span><span class="token token" style="color:#403f53">,</span><span> artistsQueryReference</span><span class="token token" style="color:#403f53">)</span><span class="token token" style="color:#403f53">;</span><span> </span><span> </span><span class="token token control-flow" style="color:#590000">return</span><span> </span><span class="token token" style="color:#403f53">(</span><span> </span><span> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">Name</span><span class="token token" style="color:#403f53">></span><span class="token token" style="color:#403f53">{</span><span>data</span><span class="token token" style="color:#793735">?.</span><span>artist</span><span class="token token" style="color:#793735">?.</span><span>name</span><span class="token token" style="color:#403f53">}</span><span class="token token" style="color:#403f53"></</span><span class="token token" style="color:#081686">Name</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53">{</span><span>data</span><span class="token token" style="color:#793735">?.</span><span>artist </span><span class="token token" style="color:#793735">&&</span><span> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">ArtistCard</span><span class="token token" style="color:#6a0352"> </span><span class="token token" style="color:#081686">artist</span><span class="token token script language-javascript script-punctuation" style="color:#6a0352">=</span><span class="token token script language-javascript" style="color:#403f53">{</span><span class="token token script language-javascript" style="color:#6a0352">data</span><span class="token token script language-javascript" style="color:#793735">?.</span><span class="token token script language-javascript" style="color:#6a0352">artist</span><span class="token token script language-javascript" style="color:#403f53">}</span><span class="token token" style="color:#6a0352"> </span><span class="token token" style="color:#403f53">/></span><span class="token token" style="color:#403f53">}</span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"></</span><span class="token token" style="color:#403f53">></span><span> </span><span> </span><span class="token token" style="color:#403f53">)</span><span class="token token" style="color:#403f53">;</span><span> </span><span></span><span class="token token" style="color:#403f53">}</span><span> </span> </code></pre></pre></div></div></div></div><div class="container exampleSection lightBackground"><div class="wrapper"><div class="wrapperInner"><div><h2>Fragments</h2><p>Step two is to render a tree of React components powered by Relay. Components use fragments to declare their data dependencies, and read data from the Relay store by calling<!-- --> <a href="/docs/api-reference/use-fragment/"><code>useFragment</code></a>.</p><p>A fragment is a snippet of GraphQL that is tied to a GraphQL type (like <code>Artist</code>) and which specifies <i>what</i> <!-- -->data to read from an item of that type.</p><p><a href="/docs/api-reference/use-fragment/"><code>useFragment</code></a> takes two parameters: a fragment literal and a fragment reference. A fragment reference specifies<!-- --> <i>which</i> entity to read that data from.</p><p>Fragments cannot be fetched by themselves; instead, they must ultimately be included in a parent query. The Relay compiler will then ensure that the data dependencies declared in such fragments are fetched as part of that parent query.</p></div><div><pre class="outerPre"><pre style="white-space:pre;margin:0"><code class="language-jsx" style="white-space:pre;color:#403f53"><span> </span><span></span><span class="token token module" style="color:#590000">import</span><span> </span><span class="token token imports" style="color:#081686">React</span><span> </span><span class="token token module" style="color:#590000">from</span><span> </span><span class="token token" style="color:#590000">"react"</span><span class="token token" style="color:#403f53">;</span><span> </span><span></span><span class="token token module" style="color:#590000">import</span><span> </span><span class="token token imports" style="color:#403f53">{</span><span class="token token imports"> graphql</span><span class="token token imports" style="color:#403f53">,</span><span class="token token imports"> useFragment</span><span class="token token imports" style="color:#403f53">}</span><span> </span><span class="token token module" style="color:#590000">from</span><span> </span><span class="token token" style="color:#590000">"react-relay"</span><span class="token token" style="color:#403f53">;</span><span> </span> <span></span><span class="token token module" style="color:#590000">export</span><span> </span><span class="token token module" style="color:#590000">default</span><span> </span><span class="token token" style="color:#590000">function</span><span> </span><span class="token token function" style="color:#081686">ArtistCard</span><span class="token token" style="color:#403f53">(</span><span class="token token" style="color:#081686">props</span><span class="token token" style="color:#403f53">)</span><span> </span><span class="token token" style="color:#403f53">{</span><span> </span><span> </span><span class="token token" style="color:#590000">const</span><span> </span><span class="token token" style="color:#403f53">{</span><span>href</span><span class="token token" style="color:#403f53">,</span><span> image</span><span class="token token" style="color:#403f53">,</span><span> bio</span><span class="token token" style="color:#403f53">}</span><span> </span><span class="token token" style="color:#793735">=</span><span> </span><span class="token token function">useFragment</span><span class="token token" style="color:#403f53">(</span><span> </span><span> graphql</span><span class="token token template-string template-punctuation" style="color:#590000">`</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#590000">fragment</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql fragment function">ArtistHeader_artist</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#590000">on</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#081686">Artist</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#403f53">{</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> href </span><span class="token token template-string graphql language-graphql"> bio </span><span class="token token template-string graphql language-graphql"> image </span><span class="token token template-string graphql language-graphql" style="color:#403f53">{</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> url </span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#403f53">}</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql" style="color:#403f53">}</span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string graphql language-graphql"> </span><span class="token token template-string template-punctuation" style="color:#590000">`</span><span class="token token" style="color:#403f53">,</span><span> </span><span> props</span><span class="token token" style="color:#403f53">.</span><span class="token token property-access">artist</span><span> </span><span> </span><span class="token token" style="color:#403f53">)</span><span class="token token" style="color:#403f53">;</span><span> </span><span> </span><span class="token token" style="color:#590000">const</span><span> imageUrl </span><span class="token token" style="color:#793735">=</span><span> image </span><span class="token token" style="color:#793735">&&</span><span> image</span><span class="token token" style="color:#403f53">.</span><span class="token token property-access">url</span><span class="token token" style="color:#403f53">;</span><span> </span> <span> </span><span class="token token control-flow" style="color:#590000">return</span><span> </span><span class="token token" style="color:#403f53">(</span><span> </span><span> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">Card</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">Link</span><span class="token token" style="color:#6a0352"> </span><span class="token token" style="color:#081686">href</span><span class="token token script language-javascript script-punctuation" style="color:#6a0352">=</span><span class="token token script language-javascript" style="color:#403f53">{</span><span class="token token script language-javascript" style="color:#6a0352">href</span><span class="token token script language-javascript" style="color:#403f53">}</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">Image</span><span class="token token" style="color:#6a0352"> </span><span class="token token" style="color:#081686">imageUrl</span><span class="token token script language-javascript script-punctuation" style="color:#6a0352">=</span><span class="token token script language-javascript" style="color:#403f53">{</span><span class="token token script language-javascript" style="color:#6a0352">imageUrl</span><span class="token token script language-javascript" style="color:#403f53">}</span><span class="token token" style="color:#6a0352"> </span><span class="token token" style="color:#403f53">/></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"><</span><span class="token token" style="color:#081686">Bio</span><span class="token token" style="color:#403f53">></span><span class="token token" style="color:#403f53">{</span><span>bio</span><span class="token token" style="color:#403f53">}</span><span class="token token" style="color:#403f53"></</span><span class="token token" style="color:#081686">Bio</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"></</span><span class="token token" style="color:#081686">Link</span><span class="token token" style="color:#403f53">></span><span class="token token plain-text"> </span><span class="token token plain-text"> </span><span class="token token" style="color:#403f53"></</span><span class="token token" style="color:#081686">Card</span><span class="token token" style="color:#403f53">></span><span> </span><span> </span><span class="token token" style="color:#403f53">)</span><span class="token token" style="color:#403f53">;</span><span> </span><span></span><span class="token token" style="color:#403f53">}</span><span> </span> </code></pre></pre></div></div></div></div><div class="container textSection graphqlSection darkBackground"><div class="wrapper"><h2>GraphQL best practices baked in</h2><p>Relay applies and relies on GraphQL best practices. To get the most from Relay's features, you'll want your GraphQL server to conform to these standard practices.</p><div class="gridBlock"><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Fragments</h2><div><p>A GraphQL<!-- --> <a href="https://graphql.org/learn/queries/#fragments" target="_blank">Fragment</a> <!-- -->is a reusable selection of fields for a given GraphQL type. It can be composed by including it in other Fragments, or including it as part of GraphQL Queries.</p><p>Relay uses Fragments to declare data requirements for components, and compose data requirements together.</p><p>See the <a href="/docs/guided-tour/">guided tour</a></p></div></div></div><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Connections</h2><div><p>GraphQL<!-- --> <a href="https://graphql.org/learn/pagination/#complete-connection-model" target="_blank">Connections</a> <!-- -->are a model for representing lists of data in GraphQL, so that they can easily be paginated in any direction, as well as to be able to encode rich relationship data.</p><p>GraphQL Connections are considered a best practice for<!-- --> <a href="https://graphql.org/learn/pagination/">Pagination in GraphQL</a>, and Relay provides first class support for these, as long as your GraphQL server supports them.</p><p>See the<!-- --> <a href="/docs/guides/graphql-server-specification/#connections">Connections</a> <!-- -->docs</p></div></div></div><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Global Object Identification</h2><div><p>Relay relies on<!-- --> <a href="https://graphql.org/learn/global-object-identification/" target="_blank">Global Object Identification</a> <!-- -->to provide reliable caching and refetching, and to make it possible to automatically merge updates for objects.</p><p>Global Object Identification consists on providing globally unique ids across your entire schema for every type, built using the Node GraphQL interface.</p><p><a href="/docs/guides/graphql-server-specification/#object-identification">See the Object Identification docs</a></p></div></div></div></div></div></div><div class="container textSection declarativeSection lightBackground"><div class="wrapper"><h2>Flexible Mutations</h2><div class="gridBlock"><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Describe data changing</h2><div><p>Using GraphQL mutations, you can declaratively define and request the data that will be affected by executing a mutation in a <em>single round trip</em>, and Relay will automatically merge and propagate those changes.</p></div></div></div><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Automatic updates</h2><div><p>Using Global Object Identification, Relay is capable of automatically merging mutation updates for any affected objects, and updating only the affected components.</p><p>For more complex cases where updates cannot automatically be merged, Relay provides apis to manually update the local Relay data in response to a mutation.</p></div></div></div><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Designed for great UX</h2><div><p>Relay's mutation API supports making optimistic updates to show immediate feedback to users, as well as error handling and automatically reverting changes when mutations fail.</p></div></div></div></div></div></div><div class="container textSection aheadSection darkBackground"><div class="wrapper"><h2>Ahead-of-time Safety</h2><div class="gridBlock"><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Peace of mind</h2><div><p>While you work on a Relay project, the Relay compiler will guide you to ensure project-wide consistency and correctness against your GraphQL schema.</p></div></div></div><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Optimized runtime</h2><div><p>Relay pre-computes a lot of work (like processing and optimizing queries) ahead of time, during build time, in order to make the runtime on the browser or device as efficient as possible.</p></div></div></div><div class="blockElement threeByGridBlock"><div class="blockContent"><h2>Type safety</h2><div><p>Relay generates Flow or TypeScript types for each of your React components that use Relay, which represent the data that each component receives, so you can make changes more quickly and safely while knowing that correctness is guaranteed.</p></div></div></div></div></div></div><div class="container textSection relaySection lightBackground"><div class="wrapper"><h2>Can Relay Work For Me?</h2><div class="gridBlock"><div class="blockElement twoByGridBlock"><div class="blockContent"><h2>Adopt Incrementally</h2><div><p>If you already can render React components, you're most of the way there. Relay requires a Babel plugin, and to also run the Relay Compiler.</p><p>You can use Relay out of the box with Create React App and Next.js.</p></div></div></div><div class="blockElement twoByGridBlock"><div class="blockContent"><h2>Make Complexity Explicit</h2><div><p>Relay requires a bit more up-front setup and tools, in favour of supporting an architecture of isolated components which can scale with your team and app complexity.</p><p>Learn these principles once, then spend more time working on business logic instead of pipelining data.</p></div></div></div><div class="blockElement twoByGridBlock"><div class="blockContent"><h2>Used at Facebook Scale</h2><div><p>Relay is critical infrastructure in Facebook, there are tens of thousands of components using it. Relay was built in tandem with GraphQL and has full-time staff working to improve it.</p></div></div></div><div class="blockElement twoByGridBlock"><div class="blockContent"><h2>Not Just for Big Apps</h2><div><p>If you're the sort of team that believes in using Flow or TypeScript to move error detection to dev-time, then Relay is likely a good fit for you.</p><p>It's probable you'd otherwise re-create a lot of Relay's caching, and UI best practices independently.</p></div></div></div></div></div></div><div class="container textSection lightBackground"><div class="wrapper"><h2>Proudly Used Elsewhere</h2><p>Relay was originally created for the React Native sections of the Facebook app, and it has been used adapted and improved by other teams internally and externally.</p><div><div class="logosHomepage"><a href="https://www.1stdibs.com/" rel="nofollow"><img src="/img/logos/1stdibs.png" title="1stdibs"><div><h6>1stdibs</h6><p>Used on 1stdibs.com</p></div></a><a href="http://artsy.github.io/open-source/" rel="nofollow"><img src="/img/logos/artsy.png" title="Artsy"><div><h6>Artsy</h6><p>Used on artsy.net, and the React Native iOS app, Eigen.</p></div></a><a href="https://github.com/entria" rel="nofollow"><img src="/img/logos/entria.png" title="Entria"><div><h6>Entria</h6><p>Powers feedback.house</p></div></a><a href="https://code.facebook.com" rel="nofollow"><img src="/img/logos/facebook.png" title="Facebook"><div><h6>Facebook</h6><p>Used on facebook.com, and in the React Native mobile app.</p></div></a><a href="https://www.oculus.com/" rel="nofollow"><img src="/img/logos/oculus.png" title="Oculus"><div><h6>Oculus</h6><p>Used on oculus.com, Oculus Home in VR, and the React Native Oculus companion app.</p></div></a><a href="https://www.autoguru.com.au/" rel="nofollow"><img src="/img/logos/autoguru.png" title="AutoGuru"><div><h6>AutoGuru</h6><p>Used at autoguru.com.au, and affiliates</p></div></a></div></div><div class="more-users"><a class="button" href="/users/">More Relay Users</a></div></div></div></div></div></div><footer class="footer"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" target="_self" href="/docs/">Introduction</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" target="_self" href="/users/">User Showcase</a></li></ul></div><div class="col footer__col"><div class="footer__title">Legal</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/data-policy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Data Policy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/cookie-policy/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Cookie Policy<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><img src="/img/relay.svg" class="themedImage_ToTc themedImage--light_HNdA footer__logo"><img src="/img/relay.svg" class="themedImage_ToTc themedImage--dark_i4oU footer__logo"></div><div class="footer__copyright">Copyright 漏 2025 Meta Platforms, Inc. Built with Docusaurus.</div></div></div></footer></div> <script src="/assets/js/runtime~main.2266fe68.js"></script> <script src="/assets/js/main.e1696ef0.js"></script> </body> </html>