Skip to content

Commit 860e086

Browse files
facebook-github-botfacebook-github-bot
committed
Deploying to gh-pages from @ faa4c77 🚀
1 parent 2f52e4d commit 860e086

1,232 files changed

Lines changed: 4954 additions & 4915 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎404.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@
1616

1717

1818
<link rel="search" type="application/opensearchdescription+xml" title="Relay" href="/opensearch.xml"><link rel="stylesheet" href="/assets/css/styles.3fffda90.css">
19-
<link rel="preload" href="/assets/js/runtime~main.21cc158c.js" as="script">
20-
<link rel="preload" href="/assets/js/main.3a06b5ac.js" as="script">
19+
<link rel="preload" href="/assets/js/runtime~main.a2156310.js" as="script">
20+
<link rel="preload" href="/assets/js/main.9a8ca0fb.js" as="script">
2121
</head>
2222
<body class="navigation-with-keyboard">
2323
<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>
2424

2525
<div style="display: none; text-align: center; background-color: white; color: black;" id="internaldocs-banner"></div><div id="__docusaurus">
2626
<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/">v20.1.0</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/">Next 🚧</a></li><li><a class="dropdown__link" href="/docs/">v20.1.0</a></li><li><a class="dropdown__link" href="/docs/v20.0.0/">v20.0.0</a></li><li><a class="dropdown__link" href="/docs/v19.0.0/">v19.0.0</a></li><li><a class="dropdown__link" href="/docs/v18.0.0/">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"><main class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></main></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>
27-
<script src="/assets/js/runtime~main.21cc158c.js"></script>
28-
<script src="/assets/js/main.3a06b5ac.js"></script>
27+
<script src="/assets/js/runtime~main.a2156310.js"></script>
28+
<script src="/assets/js/main.9a8ca0fb.js"></script>
2929
</body>
3030
</html>

‎_src/guides/data-driven-dependencies/client-3d.md‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Here is an example of how Client 3D can be used in a React app.
2424
<FbInternalOnly>
2525

2626
:::note
27-
For an example diff implementing Client 3D in a www repository, see D62352682.
27+
For an example diff implementing Client 3D in www, see D62352682.
2828
:::
2929

3030
</FbInternalOnly>
@@ -51,7 +51,6 @@ extend type Query {
5151
### Relay Resolvers
5252
You have 3 Relay Resolvers that return concrete objects that implement the `IClient3D` interface:
5353

54-
5554
<Tabs>
5655
<TabItem value="1" label="Client3DBar" default>
5756

@@ -180,10 +179,8 @@ component Client3DRelayRenderer() {
180179
In order to use Client 3D, you don't have to modify your Relay Resolvers or schema at all.
181180
182181
Just modify your component in the following ways:
183-
1. Declare separate fragments for each concrete type implementing `IClient3D` that you're fetching. So
184-
in this example, these separate fragments are `FOO_FRAGMENT`, `BAR_FRAGMENT`, and `HELLO_WORLD_FRAGMENT`.
185-
2. Add the `@module` directive to your fragment, and include the name of the UI component corresponding
186-
to this fragment's data as an argument.
182+
1. Declare separate fragments for each concrete type implementing `IClient3D` that you're fetching. So in this example, these separate fragments are `FOO_FRAGMENT`, `BAR_FRAGMENT`, and `HELLO_WORLD_FRAGMENT`.
183+
2. Add the `@module` directive to your fragment, and include the name of the corresponding UI component to this fragment's data as an argument.
187184
3. Return the final component using Relay's `MatchContainer`, providing the returned query data as a prop.
188185
189186
Notice that in Client 3D, just as in Server 3D, you cannot use `@module` on multiple fragments on the SAME concrete type (but they can be on the same abstract type i.e. a union or an interface).
@@ -198,7 +195,7 @@ If you are in www, but not in Comet, you should use `RelayFBMatchContainer` inst
198195
199196
</FbInternalOnly>
200197
201-
After Client 3D, your component code should look something like this:
198+
After Client 3D, your component code will look something like this:
202199
```jsx
203200
const {graphql, useFragment, useClientQuery, MatchContainer} = require('react-relay');
204201

@@ -251,7 +248,7 @@ component Client3DRelayRenderer() {
251248
252249
While Client 3D can offer many benefits such as a more intuitive developer experience, enhanced maintanability, and faster performance, it also has some limitations that Server 3D does not.
253250
254-
One key difference is the number of round trips required to fetch data. Server 3D requires at most two round trips: one to the server for data and one to the CDN. In contrast, Client 3D evaluates resolver code as part of rendering the component, which means that the client needs to render the component to discover what JavaScript code is needed. This can lead to additional round trips, especially when dealing with nested Client 3D usage.
251+
One key difference is the number of round trips required to fetch data. Server 3D requires at most two round trips: one to the server for data and one to the CDN for JavaScript. In contrast, Client 3D evaluates resolver code as part of rendering the component, which means that the client needs to render the component to discover what JavaScript code is needed. This can lead to additional round trips, especially when dealing with nested Client 3D usage.
255252
256253
For example, consider a blog entry that uses Client 3D to render either a photo blog post or text blog post. The text blog post then uses Client 3D again to determine what type of text presentation format should be used. This can result in nested Client 3D usage, leading to multiple round trips.
257254

‎_src/guides/data-driven-dependencies/configuration.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,22 +101,22 @@ For example:
101101

102102
### `dynamicModuleProvider`
103103

104-
In OSS, `dynamicModuleProvider` has two subfields:
104+
The `dynamicModuleProvider` has two subfields:
105105
- `mode`: This should be set to "Custom".
106106
- `statement`: This is the statement that will be used to import your UI module `<$module>` into the
107107
parent component where 3D is being used. You can set it to whatever you need to import your module successfully.
108108

109109
### `surface`
110110

111-
In OSS, the `surface` field should be set to `resolvers`.
111+
The `surface` field should be set to `resolvers`.
112112

113-
Here is an example of what an OSS relay compiler configuration that enables client 3D could look like:
113+
Here is an example of what a Relay compiler configuration that enables client 3D could look like:
114114

115115
```js
116116
"moduleImportConfig": {
117117
"dynamicModuleProvider": {
118118
"mode": "Custom",
119-
"statement": "() => require('./.<$module>')"
119+
"statement": "() => require('./<$module>')"
120120
},
121121
"surface": "resolvers"
122122
}

‎_src/guides/data-driven-dependencies/introduction.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ keywords:
1010
- match
1111
- MatchContainer
1212
---
13+
1314
import DocsRating from '@site/src/core/DocsRating';
15+
import {FbInternalOnly, OssOnly} from 'docusaurus-plugin-internaldocs-fb/internal';
1416

1517
Data Driven Dependencies (3D) is a feature in Relay that allows for the dynamic loading of components based on the data being rendered. This is useful when you have multiple possible components that could be used to render a piece of data, and you want to only load the component that is actually needed.
1618

@@ -22,16 +24,16 @@ In addition to improving performance, 3D also makes it easier to manage complex
2224

2325
There are a few canonical use-cases where 3D is recommended:
2426

25-
* **Fields that are typically null.** Comments have a *nullable* field that specifies that a quality survey should be displayed. Most comments won't have a quality survey attached (the field is typically null), so ideally the code for the survey component could only be downloaded when necessary to make the average case faster.
26-
* **Unions.** The core News Feed type is a union of dozens of variants, each rendered by a different React component. A given page of stories will only contain a small number of story types, so ideally the application would only have to download the code for the types a user actually sees, rather than all possible story types.
27-
* **Rendering strategies.** Finally, some pieces of content can be rendered using a variety of different **rendering strategies**. As an example, consider a `Video` type that can be rendered as a thumbnail or autoplaying video, depending on whether the user has opted into autoplaying video. The typical approach to this in our native apps is to ship code for all possible rendering strategies, fetch the GraphQL data for all those strategies, and select/render the best strategy on the client. This approach is problematic on the web, as it implies downloading both the code and data for *all* rendering strategies. Instead, data-driven dependencies allows products to only download the code and data for the *selected* rendering strategy for each item. With data-driven dependencies, we can download either the markdown code/data *or* the plaintext code or data instead of both.
27+
* **Fields that are typically null.** For example, a `Comment` type that may optionally include an image. Most comments won't include this type so ideally the code for the image rendering component would only be downloaded when necessary to make the average case faster.
28+
* **Unions.** For example, a News Feed type may have a union of variants, each rendered by a different React component (e.g. text update, videos, photos, etc.). A given page of stories will only contain a small number of story types, so ideally the application would only have to download the code for the types a user actually sees, rather than all possible story types.
29+
* **Rendering strategies.** Finally, some pieces of content can be rendered using a variety of different **rendering strategies**. As an example, consider a `Video` type that can be rendered as a thumbnail or autoplaying video, depending on whether the user has opted into autoplaying video. Data-driven dependencies allows products to only download the code and data for the *selected* rendering strategy for each item.
2830

2931
## Types of 3D
3032

3133
There are two types of 3D that Relay supports:
32-
- [Server 3D](../server-3d/): used when all the data in your 3D-rendered components are resolved on GraphQL servers.
33-
- [Client 3D](../client-3d/): used when all the data in your 3D-rendered components are resolved via client-side [Relay resolvers](../../relay-resolvers/introduction/).
34+
- [Server 3D](./server-3d.md): used when all the data in your 3D-rendered components are resolved on GraphQL servers.
35+
- [Client 3D](./client-3d.md): used when all the data in your 3D-rendered components are resolved via client-side [Relay resolvers](../relay-resolvers/introduction.md).
3436

35-
For details on how to configure Relay to support the type of 3D you need, see [Configuration](../configuration).
37+
For details on how to configure Relay to support the type of 3D you need, see [Configuration](./configuration.md).
3638

3739
<DocsRating />

0 commit comments

Comments
 (0)