A Guided Tour
Relay is a framework for managing and declaratively fetching GraphQL data. Specifically, it provides a set of APIs to fetch and declare data dependencies for React components, in colocation with component definitions themselves.
+A Guided Tour
Relay is a framework for managing and declaratively fetching GraphQL data. Specifically, it provides a set of APIs to fetch and declare data dependencies for React components, in colocation with component definitions themselves.
In this guide, we're going to go over how to use Relay to build out some of the more common use cases in apps. If you're interested in a detailed reference of our APIs, check out our API Reference page. Before getting started, bear in mind that we assume some level of familiarity with JavaScript, React, GraphQL, and assume that you have set up a GraphQL Server that adheres to the Relay specification
Example App
To see a full example using Relay Hooks and our integration with Suspense for Data Fetching, check out: relay-examples/issue-tracker.
@@ -120,16 +120,16 @@return
( - <> - <h1>{data.name}</h1> - <div> - <img src={data.profile_picture?.uri} /> - </div> - </> + <> + <h1>{data.name}</h1> + <div> + <img src={data.profile_picture?.uri} /> + </div> + </> ); } -module.exports = UserComponent; +module.exports = UserComponent;Let's distill what's going on here:
-
@@ -181,17 +181,17 @@
- In this case, we're showing 2 separate loading UIs:
-
@@ -760,10 +760,10 @@
- We have a
MainContent
component that takes a tab to render. This component might suspend while it loads the content for the current tab. During initial render, if this component suspends, we'll show theLoadingGlimmer
fallback from theSuspense
boundary that is wrapping it.
@@ -803,10 +803,10 @@ - We can use the Error Boundary to wrap subtrees and show a different UI when an error occurs within that subtree. When an error occurs, the specified
fallback
will be rendered instead of the content inside the boundary. - Note that we can also control the granularity at which we render error UIs, by wrapping components at different levels with error boundaries. In this example, if any error occurs within
MainContent
orSecondaryContent
, we will render anErrorSection
in place of the entire app content.
@@ -944,31 +944,31 @@ - The sample Error Boundary in this example code will provide a
retry
function to re-attempt to render the content that originally produced the error. By doing so, we will attempt to re-render our query component (that usesuseLazyLoadQuery
), and consequently attempt to fetch the query again. - Relay will autogenerate a query by adding the
@refetchable
directive to our fragment, and we can import it and pass it tofetchQuery
. Note that@refetchable
directive can only be added to fragments that are "refetchable", that is, on fragments that are onViewer
, or onQuery
, or on a type that implementsNode
(i.e. a type that has anid
field). - In order to fetch the query, we need to know the
id
of the user since it will be a required query variable in the generated query. To do so, we simply include theid
in our fragment.
@@ -1569,10 +1569,10 @@ - Calling
setVariables
and passing a new set of variables will re-render the component and cause the query to be fetched again with the newly provided variables. In this case, we will fetch theUser
with id'different-id'
, and render the results when they're available.
@@ -1623,10 +1623,10 @@ - In this case, we're keeping both the
fetchPolicy
andvariables
in component state in order to trigger a refetch both with differentvariables
and a differentfetchPolicy
. useRefetchableFragment
behaves the same way as auseFragment
(Fragments), but with a few additions: @@ -1753,24 +1753,24 @@return ( - <> - <h1>Friends of {data.name}:</h1> - <SuspenseList revealOrder="forwards"> + <> + <h1>Friends of {data.name}:</h1> + <SuspenseList revealOrder="forwards"> {/* Extract each friend from the resulting data */} {(data.friends?.edges ?? []).map(edge => { const node = edge.node; return ( - <Suspense fallback={<Glimmer />}> - <FriendComponent user={node} /> - </Suspense> + <Suspense fallback={<Glimmer />}> + <FriendComponent user={node} /> + </Suspense> ); })} - </SuspenseList> - </> + </SuspenseList> + </> ); } -module.exports = FriendsListComponent; +module.exports = FriendsListComponent;
usePaginationFragment
behaves the same way as auseFragment
(Fragments), so our list of friends is available underdata.friends.edges.node
, as declared by the fragment. However, it also has a few additions: @@ -1817,32 +1817,32 @@return ( - <> - <h1>Friends of {data.name}:</h1> - <SuspenseList revealOrder="forwards"> + <> + <h1>Friends of {data.name}:</h1> + <SuspenseList revealOrder="forwards"> {(data.friends?.edges ?? []).map(edge => { const node = edge.node; return ( - <Suspense fallback={<Glimmer />}> - <FriendComponent user={node} /> - </Suspense> + <Suspense fallback={<Glimmer />}> + <FriendComponent user={node} /> + </Suspense> ); })} - </SuspenseList> + </SuspenseList> - <Button - onClick={() => { + <Button + onClick={() => { startTransition(() => { loadNext(10) }); }}> Load more friends - </Button> - </> + </Button> + </> ); } -module.exports = FriendsListComponent; +module.exports = FriendsListComponent;
Let's distill what's happening here:
-
@@ -1892,35 +1892,35 @@
hasNext
is a boolean which indicates if the connection has more items available. This information can be useful for determining if different UI controls should be rendered. In our specific case, we only render theButton
if there are more friends available in the connection .
@@ -1982,39 +1982,39 @@ - Note that calling
loadNext
will use the originalorder_by
andsearch_term
values used for the initial query. During pagination, these value won't (and shouldn't) change. - Calling
refetch
and passing a new set of variables will fetch the fragment again with the newly-provided variables. The variables you need to provide are a subset of the variables that the generated query expects; the generated query will require anid
, if the type of the fragment has anid
field, and any other variables that are transitively referenced in your fragment. @@ -2618,11 +2618,11 @@</> + </> ); } - +
- The APIs for both "forward" and "backward" are exactly the same, they're only named differently. When paginating forward, then the
after
andfirst
connection arguments will be used, when paginating backward, thebefore
andlast
connection arguments will be used. - Note that the primitives for both "forward" and "backward" pagination are exposed from a single use of
usePaginationFragment
call, so both "forward" and "backward" pagination can be performed simultaneously in the same component.
@@ -3476,7 +3476,7 @@
Testing
See this guide for Testing Relay Components, which also applies for any components built using Relay Hooks.
- - The APIs for both "forward" and "backward" are exactly the same, they're only named differently. When paginating forward, then the
return ( - <> - <h1>Friends of {data.name}:</h1> - <SuspenseList revealOrder="forwards"> + <> + <h1>Friends of {data.name}:</h1> + <SuspenseList revealOrder="forwards"> {(data.friends?.edges ?? []).map(edge => { const node = edge.node; return ( - <Suspense fallback={<Glimmer />}> - <FriendComponent user={node} /> - </Suspense> + <Suspense fallback={<Glimmer />}> + <FriendComponent user={node} /> + </Suspense> ); })} - </SuspenseList> + </SuspenseList> {/* Only render button if there are more friends to load in the list */} {hasNext ? ( - <Button - onClick={() => { + <Button + onClick={() => { startTransition(() => { loadNext(10) }); }}> Load more friends - </Button> + </Button> ) : null} - </> + </> ); } -module.exports = FriendsListComponent; +module.exports = FriendsListComponent;
); return ( - <> - <h1>Friends of {data.name}:</h1> - <SuspenseList revealOrder="forwards"> + <> + <h1>Friends of {data.name}:</h1> + <SuspenseList revealOrder="forwards"> {(data.friends?.edges ?? []).map(edge => { const node = edge.node; return ( - <Suspense fallback={<Glimmer />}> - <FriendComponent user={node} /> - </Suspense> + <Suspense fallback={<Glimmer />}> + <FriendComponent user={node} /> + </Suspense> ); })} - </SuspenseList> + </SuspenseList> {/* Render a Spinner next to the button immediately, while transition is pending */} - {isPending ? <Spinner /> : null} + {isPending ? <Spinner /> : null} {hasNext ? ( - <Button - {/* Disbale the button immediately, while transition is pending */} - disabled={isPending} - onClick={() => { + <Button + {/* Disbale the button immediately, while transition is pending */} + disabled={isPending} + onClick={() => { startTransition(() => { loadNext(10) }); }}> Load more friends - </Button> + </Button> ) : null} - </> + </> ); } -module.exports = FriendsListComponent; +module.exports = FriendsListComponent;
Let's distill what's going on here:
-
@@ -2112,10 +2112,10 @@
<Button onClick={() => loadNext(10)}>Load more friends</Button> - </> + </> ); } - +
<SuspenseList>...</SuspenseList> <Button onClick={() => loadNext(10)}>Load more friends</Button> - </> + </> ); } - +
Let's distill what's going on here:
</Button> - </div> + </div> ); } - +
Let's take a look at what's happening here:
</Button> - </div> + </div> ); } - +
NOTE: Providing a Suspense config to
useTransition
will only work as expected in React Concurrent Mode<ErrorBoundary fallback={error => <ErrorUI error={error} />}> <MainContent /> <SecondaryContent /> - </ErrorBoundary> + </ErrorBoundary> ); } - +
-
+/** +
+ */ -const ErrorBoundary = require('ErrorBoundary'); -const React = require('React'); +const ErrorBoundary = require('ErrorBoundary'); +const React = require('React'); -const MainContent = require('./MainContent.react'); +const MainContent = require('./MainContent.react'); -function App() { - return ( - <ErrorBoundaryWithRetry - fallback={(error, retry) => - <> - <ErrorUI error={error} /> +function App() { + return ( + <ErrorBoundaryWithRetry + fallback={(error, retry) => + <> + <ErrorUI error={error} /> {/* Render a button to retry; this will attempt to re-render the content inside the boundary, i.e. the query component */} - <Button onPress={retry}>Retry</Button> - </> + <Button onPress={retry}>Retry</Button> + </> }> - <MainContent /> - </ErrorBoundaryWithRetry> + <MainContent /> + </ErrorBoundaryWithRetry> ); } -/** * App.react.js - */
return ( - <> - <h1>{data.user?.name}</h1> - <UsernameComponent user={data.user} /> - </> + <> + <h1>{data.user?.name}</h1> + <UsernameComponent user={data.user} /> + </> ); } @@ -1289,17 +1289,17 @@
return ( - <> - <h1>{data.user?.name}</h1> + <> + <h1>{data.user?.name}</h1> {/* Wrap the UserComponent in Suspense to allow other parts of the App to be rendered even if the username is missing. */} - <Suspense fallback={<LoadingSpinner label="Fetching username" />}> - <UsernameComponent user={data.user} /> - </Suspense> - </> + <Suspense fallback={<LoadingSpinner label="Fetching username" />}> + <UsernameComponent user={data.user} /> + </Suspense> + </> ); } @@ -1413,10 +1413,10 @@
<h1>{data.user?.name}</h1> <div>Friends count: {data.user.friends?.count}</div> <Button onClick={() => refresh()}>Fetch latest count</Button> - </> + </> ); } - +
If you want to know whether the request is in flight, in order to show a busy indicator or disable a UI control, you can subscribe to the observable returned by
fetchQuery
, and keep state in your component:
+import type {AppQuery} from 'AppQuery.graphql'; @@ -1462,10 +1462,10 @@
onClick={() => refetch()}> Fetch latest count {isRefreshing ? <LoadingSpinner /> : null} </Button> - </> + </> ); } -
Refreshing Fragments
In order to refresh the data for a fragment, we can also use
fetchQuery
, but we need to provide a query to refetch the fragment under; remember, fragments can't be fetched by themselves: they need to be part of a query, so we can't just "fetch" the fragment again by itself.However, we don't need to manually write the query; instead, we can use the
@@ -1513,12 +1513,12 @@@refetchable
directive, which will make it so Relay automatically generates a query to fetch the fragment when the compiler is run:<h1>{data.name}</h1> <div>Friends count: {data.friends?.count}</div> <Button onClick={() => refresh()}>Fetch latest count</Button> - </> + </> ); } -module.exports = UserComponent; - +module.exports = UserComponent; +
</Button> </h1> - </> + </> ); } - +
Let's distill what's going on here:
</Button> </h1> - </> + </> ); } - +
</Button> - </> + </> ); } -module.exports = CommentBody; - +module.exports = CommentBody; +
Let's distill what's happening in this example:
- We have a
return (
- <>
- <h1>{userData.name}</h1>
- <div>
- <img src={userData.profile_picture?.uri} />
+ <>
+ <h1>{userData.name}</h1>
+ <div>
+ <img src={userData.profile_picture?.uri} />
Acting as: {viewerData.actor?.name ?? 'Unknown'}
- </div>
- </>
+ </div>
+ </>
);
}
-module.exports = UserComponent;
+module.exports = UserComponent;
Composing Fragments
In GraphQL, fragments are reusable units, which means they can include other fragments, and consequently a fragment can be included within other fragments or Queries:
@@ -275,20 +275,20 @@ return (
- <>
- <h1>{user.name}</h1>
- <div>
- <img src={user.profile_picture?.uri} />
+ <>
+ <h1>{user.name}</h1>
+ <div>
+ <img src={user.profile_picture?.uri} />
{user.age}
{/* Render child component, passing the _fragment reference_: */}
- <UsernameSection user={user}/>
- </div>
- </>
+ <UsernameSection user={user}/>
+ </div>
+ </>
);
}
-module.exports = UserComponent;
+module.exports = UserComponent;
There are a few things to note here:
@@ -427,11 +427,11 @@ return (
- <>
- <h1>{data.user?.name}</h1>
+ <>
+ <h1>{data.user?.name}</h1>
{/* Render child component, passing the fragment reference: */}
- <UserComponent user={data.user} />
- </>
+ <UserComponent user={data.user} />
+ </>
);
}
@@ -520,7 +520,7 @@ @arguments
and @argumentDefinitions
However, in order to prevent bloating queries with global variable declarations, Relay also provides a way to declare variables that are scoped locally to a fragment using the @arguments
and @argumentDefinitions
directives:
/**
- * Declare a fragment that accepts arguments with @argumentDefinitions
+ * Declare a fragment that accepts arguments with @argumentDefinitions
*/
function PictureComponent(props) {
@@ -541,7 +541,7 @@
}
/**
- * Include fragment using @arguments
+ * Include fragment using @arguments
*/
function UserComponent(props) {
@@ -559,7 +559,7 @@
}
/**
- * Include same fragment using _different_ @arguments
+ * Include same fragment using _different_ @arguments
*/
function OtherUserComponent(props) {
@@ -724,10 +724,10 @@ <MainContent />
<SecondaryContent />
</Suspense>
- </>
+ </>
);
}
-
+
There are a few things to note here:
-
@@ -427,11 +427,11 @@
return (
- <>
- <h1>{data.user?.name}</h1>
+ <>
+ <h1>{data.user?.name}</h1>
{/* Render child component, passing the fragment reference: */}
- <UserComponent user={data.user} />
- </>
+ <UserComponent user={data.user} />
+ </>
);
}
@@ -520,7 +520,7 @@ @arguments
and @argumentDefinitions
However, in order to prevent bloating queries with global variable declarations, Relay also provides a way to declare variables that are scoped locally to a fragment using the @arguments
and @argumentDefinitions
directives:
/**
- * Declare a fragment that accepts arguments with @argumentDefinitions
+ * Declare a fragment that accepts arguments with @argumentDefinitions
*/
function PictureComponent(props) {
@@ -541,7 +541,7 @@
}
/**
- * Include fragment using @arguments
+ * Include fragment using @arguments
*/
function UserComponent(props) {
@@ -559,7 +559,7 @@
}
/**
- * Include same fragment using _different_ @arguments
+ * Include same fragment using _different_ @arguments
*/
function OtherUserComponent(props) {
@@ -724,10 +724,10 @@ <MainContent />
<SecondaryContent />
</Suspense>
- </>
+ </>
);
}
-
+
@arguments
and @argumentDefinitions
@arguments
and @argumentDefinitions
directives:/**
- * Declare a fragment that accepts arguments with @argumentDefinitions
+ * Declare a fragment that accepts arguments with @argumentDefinitions
*/
function PictureComponent(props) {
@@ -541,7 +541,7 @@
}
/**
- * Include fragment using @arguments
+ * Include fragment using @arguments
*/
function UserComponent(props) {
@@ -559,7 +559,7 @@
}
/**
- * Include same fragment using _different_ @arguments
+ * Include same fragment using _different_ @arguments
*/
function OtherUserComponent(props) {
@@ -724,10 +724,10 @@ <MainContent />
<SecondaryContent />
</Suspense>
- </>
+ </>
);
}
-
A Guided Tour
Relay is a framework for managing and declaratively fetching GraphQL data. Specifically, it provides a set of APIs to fetch and declare data dependencies for React components, in colocation with component definitions themselves.
+A Guided Tour
Relay is a framework for managing and declaratively fetching GraphQL data. Specifically, it provides a set of APIs to fetch and declare data dependencies for React components, in colocation with component definitions themselves.
In this guide, we're going to go over how to use Relay to build out some of the more common use cases in apps. If you're interested in a detailed reference of our APIs, check out our API Reference page. Before getting started, bear in mind that we assume some level of familiarity with JavaScript, React, GraphQL, and assume that you have set up a GraphQL Server that adheres to the Relay specification
Example App
To see a full example using Relay Hooks and our integration with Suspense for Data Fetching, check out: relay-examples/issue-tracker.
@@ -120,16 +120,16 @@return
( - <> - <h1>{data.name}</h1> - <div> - <img src={data.profile_picture?.uri} /> - </div> - </> + <> + <h1>{data.name}</h1> + <div> + <img src={data.profile_picture?.uri} /> + </div> + </> ); } -module.exports = UserComponent; +module.exports = UserComponent;Let's distill what's going on here:
-
@@ -181,17 +181,17 @@
- In this case, we're showing 2 separate loading UIs:
-
@@ -760,10 +760,10 @@
- We have a
MainContent
component that takes a tab to render. This component might suspend while it loads the content for the current tab. During initial render, if this component suspends, we'll show theLoadingGlimmer
fallback from theSuspense
boundary that is wrapping it.
@@ -803,10 +803,10 @@ - We can use the Error Boundary to wrap subtrees and show a different UI when an error occurs within that subtree. When an error occurs, the specified
fallback
will be rendered instead of the content inside the boundary. - Note that we can also control the granularity at which we render error UIs, by wrapping components at different levels with error boundaries. In this example, if any error occurs within
MainContent
orSecondaryContent
, we will render anErrorSection
in place of the entire app content.
@@ -944,31 +944,31 @@ - The sample Error Boundary in this example code will provide a
retry
function to re-attempt to render the content that originally produced the error. By doing so, we will attempt to re-render our query component (that usesuseLazyLoadQuery
), and consequently attempt to fetch the query again. - Relay will autogenerate a query by adding the
@refetchable
directive to our fragment, and we can import it and pass it tofetchQuery
. Note that@refetchable
directive can only be added to fragments that are "refetchable", that is, on fragments that are onViewer
, or onQuery
, or on a type that implementsNode
(i.e. a type that has anid
field). - In order to fetch the query, we need to know the
id
of the user since it will be a required query variable in the generated query. To do so, we simply include theid
in our fragment.
@@ -1569,10 +1569,10 @@ - Calling
setVariables
and passing a new set of variables will re-render the component and cause the query to be fetched again with the newly provided variables. In this case, we will fetch theUser
with id'different-id'
, and render the results when they're available.
@@ -1623,10 +1623,10 @@ - In this case, we're keeping both the
fetchPolicy
andvariables
in component state in order to trigger a refetch both with differentvariables
and a differentfetchPolicy
. useRefetchableFragment
behaves the same way as auseFragment
(Fragments), but with a few additions: @@ -1753,24 +1753,24 @@return ( - <> - <h1>Friends of {data.name}:</h1> - <SuspenseList revealOrder="forwards"> + <> + <h1>Friends of {data.name}:</h1> + <SuspenseList revealOrder="forwards"> {/* Extract each friend from the resulting data */} {(data.friends?.edges ?? []).map(edge => { const node = edge.node; return ( - <Suspense fallback={<Glimmer />}> - <FriendComponent user={node} /> - </Suspense> + <Suspense fallback={<Glimmer />}> + <FriendComponent user={node} /> + </Suspense> ); })} - </SuspenseList> - </> + </SuspenseList> + </> ); } -module.exports = FriendsListComponent; +module.exports = FriendsListComponent;
usePaginationFragment
behaves the same way as auseFragment
(Fragments), so our list of friends is available underdata.friends.edges.node
, as declared by the fragment. However, it also has a few additions: @@ -1817,32 +1817,32 @@return ( - <> - <h1>Friends of {data.name}:</h1> - <SuspenseList revealOrder="forwards"> + <> + <h1>Friends of {data.name}:</h1> + <SuspenseList revealOrder="forwards"> {(data.friends?.edges ?? []).map(edge => { const node = edge.node; return ( - <Suspense fallback={<Glimmer />}> - <FriendComponent user={node} /> - </Suspense> + <Suspense fallback={<Glimmer />}> + <FriendComponent user={node} /> + </Suspense> ); })} - </SuspenseList> + </SuspenseList> - <Button - onClick={() => { + <Button + onClick={() => { startTransition(() => { loadNext(10) }); }}> Load more friends - </Button> - </> + </Button> + </> ); } -module.exports = FriendsListComponent; +module.exports = FriendsListComponent;
Let's distill what's happening here:
-
@@ -1892,35 +1892,35 @@
hasNext
is a boolean which indicates if the connection has more items available. This information can be useful for determining if different UI controls should be rendered. In our specific case, we only render theButton
if there are more friends available in the connection .
@@ -1982,39 +1982,39 @@ - Note that calling
loadNext
will use the originalorder_by
andsearch_term
values used for the initial query. During pagination, these value won't (and shouldn't) change. - Calling
refetch
and passing a new set of variables will fetch the fragment again with the newly-provided variables. The variables you need to provide are a subset of the variables that the generated query expects; the generated query will require anid
, if the type of the fragment has anid
field, and any other variables that are transitively referenced in your fragment. @@ -2618,11 +2618,11 @@</> + </> ); } - +
- The APIs for both "forward" and "backward" are exactly the same, they're only named differently. When paginating forward, then the
after
andfirst
connection arguments will be used, when paginating backward, thebefore
andlast
connection arguments will be used. - Note that the primitives for both "forward" and "backward" pagination are exposed from a single use of
usePaginationFragment
call, so both "forward" and "backward" pagination can be performed simultaneously in the same component.
@@ -3476,7 +3476,7 @@
Testing
See this guide for Testing Relay Components, which also applies for any components built using Relay Hooks.
- - The APIs for both "forward" and "backward" are exactly the same, they're only named differently. When paginating forward, then the
return ( - <> - <h1>Friends of {data.name}:</h1> - <SuspenseList revealOrder="forwards"> + <> + <h1>Friends of {data.name}:</h1> + <SuspenseList revealOrder="forwards"> {(data.friends?.edges ?? []).map(edge => { const node = edge.node; return ( - <Suspense fallback={<Glimmer />}> - <FriendComponent user={node} /> - </Suspense> + <Suspense fallback={<Glimmer />}> + <FriendComponent user={node} /> + </Suspense> ); })} - </SuspenseList> + </SuspenseList> {/* Only render button if there are more friends to load in the list */} {hasNext ? ( - <Button - onClick={() => { + <Button + onClick={() => { startTransition(() => { loadNext(10) }); }}> Load more friends - </Button> + </Button> ) : null} - </> + </> ); } -module.exports = FriendsListComponent; +module.exports = FriendsListComponent;
); return ( - <> - <h1>Friends of {data.name}:</h1> - <SuspenseList revealOrder="forwards"> + <> + <h1>Friends of {data.name}:</h1> + <SuspenseList revealOrder="forwards"> {(data.friends?.edges ?? []).map(edge => { const node = edge.node; return ( - <Suspense fallback={<Glimmer />}> - <FriendComponent user={node} /> - </Suspense> + <Suspense fallback={<Glimmer />}> + <FriendComponent user={node} /> + </Suspense> ); })} - </SuspenseList> + </SuspenseList> {/* Render a Spinner next to the button immediately, while transition is pending */} - {isPending ? <Spinner /> : null} + {isPending ? <Spinner /> : null} {hasNext ? ( - <Button - {/* Disbale the button immediately, while transition is pending */} - disabled={isPending} - onClick={() => { + <Button + {/* Disbale the button immediately, while transition is pending */} + disabled={isPending} + onClick={() => { startTransition(() => { loadNext(10) }); }}> Load more friends - </Button> + </Button> ) : null} - </> + </> ); } -module.exports = FriendsListComponent; +module.exports = FriendsListComponent;
Let's distill what's going on here:
-
@@ -2112,10 +2112,10 @@
<Button onClick={() => loadNext(10)}>Load more friends</Button> - </> + </> ); } - +
<SuspenseList>...</SuspenseList> <Button onClick={() => loadNext(10)}>Load more friends</Button> - </> + </> ); } - +
Let's distill what's going on here:
</Button> - </div> + </div> ); } - +
Let's take a look at what's happening here:
</Button> - </div> + </div> ); } - +
NOTE: Providing a Suspense config to
useTransition
will only work as expected in React Concurrent Mode<ErrorBoundary fallback={error => <ErrorUI error={error} />}> <MainContent /> <SecondaryContent /> - </ErrorBoundary> + </ErrorBoundary> ); } - +
-
+/** +
+ */ -const ErrorBoundary = require('ErrorBoundary'); -const React = require('React'); +const ErrorBoundary = require('ErrorBoundary'); +const React = require('React'); -const MainContent = require('./MainContent.react'); +const MainContent = require('./MainContent.react'); -function App() { - return ( - <ErrorBoundaryWithRetry - fallback={(error, retry) => - <> - <ErrorUI error={error} /> +function App() { + return ( + <ErrorBoundaryWithRetry + fallback={(error, retry) => + <> + <ErrorUI error={error} /> {/* Render a button to retry; this will attempt to re-render the content inside the boundary, i.e. the query component */} - <Button onPress={retry}>Retry</Button> - </> + <Button onPress={retry}>Retry</Button> + </> }> - <MainContent /> - </ErrorBoundaryWithRetry> + <MainContent /> + </ErrorBoundaryWithRetry> ); } -/** * App.react.js - */
return ( - <> - <h1>{data.user?.name}</h1> - <UsernameComponent user={data.user} /> - </> + <> + <h1>{data.user?.name}</h1> + <UsernameComponent user={data.user} /> + </> ); } @@ -1289,17 +1289,17 @@
return ( - <> - <h1>{data.user?.name}</h1> + <> + <h1>{data.user?.name}</h1> {/* Wrap the UserComponent in Suspense to allow other parts of the App to be rendered even if the username is missing. */} - <Suspense fallback={<LoadingSpinner label="Fetching username" />}> - <UsernameComponent user={data.user} /> - </Suspense> - </> + <Suspense fallback={<LoadingSpinner label="Fetching username" />}> + <UsernameComponent user={data.user} /> + </Suspense> + </> ); } @@ -1413,10 +1413,10 @@
<h1>{data.user?.name}</h1> <div>Friends count: {data.user.friends?.count}</div> <Button onClick={() => refresh()}>Fetch latest count</Button> - </> + </> ); } - +
If you want to know whether the request is in flight, in order to show a busy indicator or disable a UI control, you can subscribe to the observable returned by
fetchQuery
, and keep state in your component:
+import type {AppQuery} from 'AppQuery.graphql'; @@ -1462,10 +1462,10 @@
onClick={() => refetch()}> Fetch latest count {isRefreshing ? <LoadingSpinner /> : null} </Button> - </> + </> ); } -
Refreshing Fragments
In order to refresh the data for a fragment, we can also use
fetchQuery
, but we need to provide a query to refetch the fragment under; remember, fragments can't be fetched by themselves: they need to be part of a query, so we can't just "fetch" the fragment again by itself.However, we don't need to manually write the query; instead, we can use the
@@ -1513,12 +1513,12 @@@refetchable
directive, which will make it so Relay automatically generates a query to fetch the fragment when the compiler is run:<h1>{data.name}</h1> <div>Friends count: {data.friends?.count}</div> <Button onClick={() => refresh()}>Fetch latest count</Button> - </> + </> ); } -module.exports = UserComponent; - +module.exports = UserComponent; +
</Button> </h1> - </> + </> ); } - +
Let's distill what's going on here:
</Button> </h1> - </> + </> ); } - +
</Button> - </> + </> ); } -module.exports = CommentBody; - +module.exports = CommentBody; +
Let's distill what's happening in this example:
- We have a
return (
- <>
- <h1>{userData.name}</h1>
- <div>
- <img src={userData.profile_picture?.uri} />
+ <>
+ <h1>{userData.name}</h1>
+ <div>
+ <img src={userData.profile_picture?.uri} />
Acting as: {viewerData.actor?.name ?? 'Unknown'}
- </div>
- </>
+ </div>
+ </>
);
}
-module.exports = UserComponent;
+module.exports = UserComponent;
Composing Fragments
In GraphQL, fragments are reusable units, which means they can include other fragments, and consequently a fragment can be included within other fragments or Queries:
@@ -275,20 +275,20 @@ return (
- <>
- <h1>{user.name}</h1>
- <div>
- <img src={user.profile_picture?.uri} />
+ <>
+ <h1>{user.name}</h1>
+ <div>
+ <img src={user.profile_picture?.uri} />
{user.age}
{/* Render child component, passing the _fragment reference_: */}
- <UsernameSection user={user}/>
- </div>
- </>
+ <UsernameSection user={user}/>
+ </div>
+ </>
);
}
-module.exports = UserComponent;
+module.exports = UserComponent;
There are a few things to note here:
@@ -427,11 +427,11 @@ return (
- <>
- <h1>{data.user?.name}</h1>
+ <>
+ <h1>{data.user?.name}</h1>
{/* Render child component, passing the fragment reference: */}
- <UserComponent user={data.user} />
- </>
+ <UserComponent user={data.user} />
+ </>
);
}
@@ -520,7 +520,7 @@ @arguments
and @argumentDefinitions
However, in order to prevent bloating queries with global variable declarations, Relay also provides a way to declare variables that are scoped locally to a fragment using the @arguments
and @argumentDefinitions
directives:
/**
- * Declare a fragment that accepts arguments with @argumentDefinitions
+ * Declare a fragment that accepts arguments with @argumentDefinitions
*/
function PictureComponent(props) {
@@ -541,7 +541,7 @@
}
/**
- * Include fragment using @arguments
+ * Include fragment using @arguments
*/
function UserComponent(props) {
@@ -559,7 +559,7 @@
}
/**
- * Include same fragment using _different_ @arguments
+ * Include same fragment using _different_ @arguments
*/
function OtherUserComponent(props) {
@@ -724,10 +724,10 @@ <MainContent />
<SecondaryContent />
</Suspense>
- </>
+ </>
);
}
-
+
There are a few things to note here:
-
@@ -427,11 +427,11 @@
return (
- <>
- <h1>{data.user?.name}</h1>
+ <>
+ <h1>{data.user?.name}</h1>
{/* Render child component, passing the fragment reference: */}
- <UserComponent user={data.user} />
- </>
+ <UserComponent user={data.user} />
+ </>
);
}
@@ -520,7 +520,7 @@ @arguments
and @argumentDefinitions
However, in order to prevent bloating queries with global variable declarations, Relay also provides a way to declare variables that are scoped locally to a fragment using the @arguments
and @argumentDefinitions
directives:
/**
- * Declare a fragment that accepts arguments with @argumentDefinitions
+ * Declare a fragment that accepts arguments with @argumentDefinitions
*/
function PictureComponent(props) {
@@ -541,7 +541,7 @@
}
/**
- * Include fragment using @arguments
+ * Include fragment using @arguments
*/
function UserComponent(props) {
@@ -559,7 +559,7 @@
}
/**
- * Include same fragment using _different_ @arguments
+ * Include same fragment using _different_ @arguments
*/
function OtherUserComponent(props) {
@@ -724,10 +724,10 @@ <MainContent />
<SecondaryContent />
</Suspense>
- </>
+ </>
);
}
-
+
@arguments
and @argumentDefinitions
@arguments
and @argumentDefinitions
directives:/**
- * Declare a fragment that accepts arguments with @argumentDefinitions
+ * Declare a fragment that accepts arguments with @argumentDefinitions
*/
function PictureComponent(props) {
@@ -541,7 +541,7 @@
}
/**
- * Include fragment using @arguments
+ * Include fragment using @arguments
*/
function UserComponent(props) {
@@ -559,7 +559,7 @@
}
/**
- * Include same fragment using _different_ @arguments
+ * Include same fragment using _different_ @arguments
*/
function OtherUserComponent(props) {
@@ -724,10 +724,10 @@ <MainContent />
<SecondaryContent />
</Suspense>
- </>
+ </>
);
}
-
API Cheatsheet
A reference for translating between the Relay Classic and Relay Modern APIs.
+API Cheatsheet
A reference for translating between the Relay Classic and Relay Modern APIs.
To add a new root for relay components
Classic: <RelayRootContainer>
Modern: <QueryRenderer>
API Cheatsheet
A reference for translating between the Relay Classic and Relay Modern APIs.
+API Cheatsheet
A reference for translating between the Relay Classic and Relay Modern APIs.
To add a new root for relay components
Classic: <RelayRootContainer>
Modern: <QueryRenderer>
API Reference
Relay Hooks
+API Reference
Relay Hooks
Relay Hooks APIs are fully compatible with React Concurrent Mode. They are also fully compatible with existing Relay APIs, meaning that they can be used together in the same application; Relay components will interop correctly regardless of whether they were written as Relay Hooks or as Relay containers.
For a usage guide, see: A Guided Tour of Relay.
For a full example using Relay Hooks and our integration with Suspense for Data Fetching, check out relay-examples/issue-tracker.
@@ -225,12 +225,12 @@return
( - <> - <h1>{data.name}</h1> - <div> - <img src={data.profile_picture?.uri} /> - </div> - </> + <> + <h1>{data.name}</h1> + <div> + <img src={data.profile_picture?.uri} /> + </div> + </> ); } @@ -298,12 +298,12 @@</Button>
- </>
+ </>
);
}
-module.exports = CommentBody;
-
+module.exports = CommentBody;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal. This fragment must have a @refetchable
directive, otherwise using it will throw an error. The @refetchable
directive can only be added to fragments that are “refetchable”, that is, on fragments that are declared on Viewer
or Query
types, or on a type that implements Node
(i.e. a type that has an id
).
@@ -428,12 +428,12 @@ </List>
<Button onClick={() => loadMore(10)}>Load more friends</Button>
- </>
+ </>
);
}
-module.exports = FriendsList;
-
+module.exports = FriendsList;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal.
diff --git a/docs/en/api-reference/index.html b/docs/en/api-reference/index.html
index 4f7fea8650382..916e20bfcdadb 100644
--- a/docs/en/api-reference/index.html
+++ b/docs/en/api-reference/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditAPI Reference
Relay Hooks
+ EditAPI Reference
Relay Hooks
Relay Hooks APIs are fully compatible with React Concurrent Mode. They are also fully compatible with existing Relay APIs, meaning that they can be used together in the same application; Relay components will interop correctly regardless of whether they were written as Relay Hooks or as Relay containers.
For a usage guide, see: A Guided Tour of Relay.
For a full example using Relay Hooks and our integration with Suspense for Data Fetching, check out relay-examples/issue-tracker.
@@ -225,12 +225,12 @@ return
(
- <>
- <h1>{data.name}</h1>
- <div>
- <img src={data.profile_picture?.uri} />
- </div>
- </>
+ <>
+ <h1>{data.name}</h1>
+ <div>
+ <img src={data.profile_picture?.uri} />
+ </div>
+ </>
);
}
@@ -298,12 +298,12 @@ </Button>
- </>
+ </>
);
}
-module.exports = CommentBody;
-
+module.exports = CommentBody;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal. This fragment must have a @refetchable
directive, otherwise using it will throw an error. The @refetchable
directive can only be added to fragments that are “refetchable”, that is, on fragments that are declared on Viewer
or Query
types, or on a type that implements Node
(i.e. a type that has an id
).
@@ -428,12 +428,12 @@ </List>
<Button onClick={() => loadMore(10)}>Load more friends</Button>
- </>
+ </>
);
}
-module.exports = FriendsList;
-
+module.exports = FriendsList;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal.
diff --git a/docs/en/architecture-overview.html b/docs/en/architecture-overview.html
index 572acd0161488..79b8db6b42347 100644
--- a/docs/en/architecture-overview.html
+++ b/docs/en/architecture-overview.html
@@ -60,7 +60,7 @@
};
}
});
-
EditArchitecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
+ EditArchitecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
Core Modules
Relay Modern is composed of three core modules:
diff --git a/docs/en/architecture-overview/index.html b/docs/en/architecture-overview/index.html
index 572acd0161488..79b8db6b42347 100644
--- a/docs/en/architecture-overview/index.html
+++ b/docs/en/architecture-overview/index.html
@@ -60,7 +60,7 @@
};
}
});
-
EditArchitecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
+ EditArchitecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
Core Modules
Relay Modern is composed of three core modules:
diff --git a/docs/en/classic-api-reference-relay-container.html b/docs/en/classic-api-reference-relay-container.html
index efb99adc07cd4..d9c5899c1fceb 100644
--- a/docs/en/classic-api-reference-relay-container.html
+++ b/docs/en/classic-api-reference-relay-container.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
+ EditRelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
- Relay ensures that this data is available before the component is rendered.
- Relay updates the component whenever the underlying data has changed.
@@ -247,19 +247,19 @@ <button onclick={this.requestRandomPictureSize}>
Request random picture size
</button>
- </View>
+ </View>
);
}
}
-module.exports = Relay.createContainer(ProfilePicture, {
- initialVariables: {size: 50},
- fragments: {
- user: () => Relay.QL`
+module.exports = Relay.createContainer(ProfilePicture, {
+ initialVariables: {size: 50},
+ fragments: {
+ user: () => Relay.QL`
fragment on User { profilePicture(size: $size) { ... } }
- `,
+ `,
},
});
-
+
In this example, whenever a picture with a new size is being loaded a spinner is displayed instead of the picture.
setVariables
setVariables([partialVariables: Object, [onReadyStateChange: Function]]): void
@@ -271,35 +271,35 @@ class Feed extends React.Component {
render() {
return (
- <div>
- {this.props.viewer.feed.edges.map(
- edge => <Story story={edge.node} key={edge.node.id} />
+ <div>
+ {this.props.viewer.feed.edges.map(
+ edge => <Story story={edge.node} key={edge.node.id} />
)}
- </div>
+ </div>
);
}
_handleScrollLoad() {
// Increments the number of stories being rendered by 10.
this.props.relay.setVariables({
- count: this.props.relay.variables.count + 10
+ count: this.props.relay.variables.count + 10
});
}
}
-module.exports = Relay.createContainer(Feed, {
- initialVariables: {count: 10},
- fragments: {
- viewer: () => Relay.QL`
- fragment on Viewer {
+module.exports = Relay.createContainer(Feed, {
+ initialVariables: {count: 10},
+ fragments: {
+ viewer: () => Relay.QL`
+ fragment on Viewer {
feed(first: $count) {
edges {
node {
id,
- ${Story.getFragment('story')},
+ ${Story.getFragment('story')},
},
},
},
}
- `,
+ `,
},
});
@@ -476,10 +476,10 @@
<Child
childFragment={props.parentFragment}
size={128}
- />;
+ />;
);
}
-
+
Now Relay will both fetch the larger photo size and Child
will know to render it.
Last updated on 11/9/2017 by Jan KassensEditRelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
+ EditRelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
- Relay ensures that this data is available before the component is rendered.
- Relay updates the component whenever the underlying data has changed.
@@ -247,19 +247,19 @@ <button onclick={this.requestRandomPictureSize}>
Request random picture size
</button>
- </View>
+ </View>
);
}
}
-module.exports = Relay.createContainer(ProfilePicture, {
- initialVariables: {size: 50},
- fragments: {
- user: () => Relay.QL`
+module.exports = Relay.createContainer(ProfilePicture, {
+ initialVariables: {size: 50},
+ fragments: {
+ user: () => Relay.QL`
fragment on User { profilePicture(size: $size) { ... } }
- `,
+ `,
},
});
-
+
In this example, whenever a picture with a new size is being loaded a spinner is displayed instead of the picture.
setVariables
setVariables([partialVariables: Object, [onReadyStateChange: Function]]): void
@@ -271,35 +271,35 @@ class Feed extends React.Component {
render() {
return (
- <div>
- {this.props.viewer.feed.edges.map(
- edge => <Story story={edge.node} key={edge.node.id} />
+ <div>
+ {this.props.viewer.feed.edges.map(
+ edge => <Story story={edge.node} key={edge.node.id} />
)}
- </div>
+ </div>
);
}
_handleScrollLoad() {
// Increments the number of stories being rendered by 10.
this.props.relay.setVariables({
- count: this.props.relay.variables.count + 10
+ count: this.props.relay.variables.count + 10
});
}
}
-module.exports = Relay.createContainer(Feed, {
- initialVariables: {count: 10},
- fragments: {
- viewer: () => Relay.QL`
- fragment on Viewer {
+module.exports = Relay.createContainer(Feed, {
+ initialVariables: {count: 10},
+ fragments: {
+ viewer: () => Relay.QL`
+ fragment on Viewer {
feed(first: $count) {
edges {
node {
id,
- ${Story.getFragment('story')},
+ ${Story.getFragment('story')},
},
},
},
}
- `,
+ `,
},
});
@@ -476,10 +476,10 @@
<Child
childFragment={props.parentFragment}
size={128}
- />;
+ />;
);
}
-
+
Now Relay will both fetch the larger photo size and Child
will know to render it.
Last updated on 11/9/2017 by Jan KassensEditRelay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
+ EditRelay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
This is the lowest level of abstraction at which product code may deal with mutations in Relay, and it corresponds to the mutation operation ("a write followed by a fetch") described in the GraphQL Specification. You specify the mutation, the inputs, and the query.
Relay.GraphQLMutation
doesn't provide any bells and whistles such as fat queries or tracked queries (that is, automatic synthesis at runtime of the mutation query to be sent to the server), instead having the user define a static and explicit query. Restricting yourself to the low-level API is a useful preparatory step that will help you ready your codebase for migration to the new static Relay core. In the meantime, if you want those dynamic features, you can opt in to the higher-level Relay.Mutation
API.
Overview
@@ -56,23 +56,23 @@ Example
-const environment = new Relay.Environment();
-const query = Relay.QL`mutation FeedbackLikeMutation {
- feedbackLike(input: $input) {
+const environment = new Relay.Environment();
+const query = Relay.QL`mutation FeedbackLikeMutation {
+ feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
}
}
}`;
-const variables = {
- input: {
- feedbackId: 'aFeedbackId',
+const variables = {
+ input: {
+ feedbackId: 'aFeedbackId',
},
};
-const mutation = Relay.GraphQLMutation.create(
- query,
+const mutation = Relay.GraphQLMutation.create(
+ query,
variables,
environment
);
@@ -149,24 +149,24 @@ Example
-const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
+const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
- id
+ id
}
}
}`;
-const optimisticResponse = {
+const optimisticResponse = {
feedback: {
- doesViewerLike: true,
- id: 'aFeedbackId',
- __typename: 'Feedback',
+ doesViewerLike: true,
+ id: 'aFeedbackId',
+ __typename: 'Feedback',
},
};
-const transaction = mutation.applyOptimistic(
+const transaction = mutation.applyOptimistic(
optimisticQuery,
optimisticResponse,
);
@@ -180,8 +180,8 @@ Optionally, precede with a call to applyOptimistic()
to apply an update optimistically to the store.
Note: This method may only be called once per instance.
Example
-const configs = [{
- type: 'RANGE_ADD',
+const configs = [{
+ type: 'RANGE_ADD',
connectionName: 'topLevelComments',
edgeName: 'feedbackCommentEdge',
parentID: 'aFeedbackId',
@@ -190,7 +190,7 @@ ''
: GraphQLMutatorConstants.PREPEND,
},
}];
-const transaction = mutation.commit(configs);
+const transaction = mutation.commit(configs);
See also: Relay.Mutation::getConfigs()
rollback
diff --git a/docs/en/classic-api-reference-relay-graphql-mutation/index.html b/docs/en/classic-api-reference-relay-graphql-mutation/index.html
index a4081267ac2ee..1164e7645385a 100644
--- a/docs/en/classic-api-reference-relay-graphql-mutation/index.html
+++ b/docs/en/classic-api-reference-relay-graphql-mutation/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
+ EditRelay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
This is the lowest level of abstraction at which product code may deal with mutations in Relay, and it corresponds to the mutation operation ("a write followed by a fetch") described in the GraphQL Specification. You specify the mutation, the inputs, and the query.
Relay.GraphQLMutation
doesn't provide any bells and whistles such as fat queries or tracked queries (that is, automatic synthesis at runtime of the mutation query to be sent to the server), instead having the user define a static and explicit query. Restricting yourself to the low-level API is a useful preparatory step that will help you ready your codebase for migration to the new static Relay core. In the meantime, if you want those dynamic features, you can opt in to the higher-level Relay.Mutation
API.
Overview
@@ -56,23 +56,23 @@ Example
-const environment = new Relay.Environment();
-const query = Relay.QL`mutation FeedbackLikeMutation {
- feedbackLike(input: $input) {
+const environment = new Relay.Environment();
+const query = Relay.QL`mutation FeedbackLikeMutation {
+ feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
}
}
}`;
-const variables = {
- input: {
- feedbackId: 'aFeedbackId',
+const variables = {
+ input: {
+ feedbackId: 'aFeedbackId',
},
};
-const mutation = Relay.GraphQLMutation.create(
- query,
+const mutation = Relay.GraphQLMutation.create(
+ query,
variables,
environment
);
@@ -149,24 +149,24 @@ Example
-const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
+const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
- id
+ id
}
}
}`;
-const optimisticResponse = {
+const optimisticResponse = {
feedback: {
- doesViewerLike: true,
- id: 'aFeedbackId',
- __typename: 'Feedback',
+ doesViewerLike: true,
+ id: 'aFeedbackId',
+ __typename: 'Feedback',
},
};
-const transaction = mutation.applyOptimistic(
+const transaction = mutation.applyOptimistic(
optimisticQuery,
optimisticResponse,
);
@@ -180,8 +180,8 @@ Optionally, precede with a call to applyOptimistic()
to apply an update optimistically to the store.
Note: This method may only be called once per instance.
Example
-const configs = [{
- type: 'RANGE_ADD',
+const configs = [{
+ type: 'RANGE_ADD',
connectionName: 'topLevelComments',
edgeName: 'feedbackCommentEdge',
parentID: 'aFeedbackId',
@@ -190,7 +190,7 @@ ''
: GraphQLMutatorConstants.PREPEND,
},
}];
-const transaction = mutation.commit(configs);
+const transaction = mutation.commit(configs);
See also: Relay.Mutation::getConfigs()
rollback
diff --git a/docs/en/classic-api-reference-relay-mutation.html b/docs/en/classic-api-reference-relay-mutation.html
index a5f16032b6e7d..b58a18d1f2ace 100644
--- a/docs/en/classic-api-reference-relay-mutation.html
+++ b/docs/en/classic-api-reference-relay-mutation.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
+ EditRelay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
Overview
Properties
diff --git a/docs/en/classic-api-reference-relay-mutation/index.html b/docs/en/classic-api-reference-relay-mutation/index.html
index a5f16032b6e7d..b58a18d1f2ace 100644
--- a/docs/en/classic-api-reference-relay-mutation/index.html
+++ b/docs/en/classic-api-reference-relay-mutation/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
+ EditRelay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
Overview
Properties
diff --git a/docs/en/classic-api-reference-relay-proptypes.html b/docs/en/classic-api-reference-relay-proptypes.html
index 698b503eb66e3..fcd9fed56e918 100644
--- a/docs/en/classic-api-reference-relay-proptypes.html
+++ b/docs/en/classic-api-reference-relay-proptypes.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
+ EditRelay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
Overview
Properties
diff --git a/docs/en/classic-api-reference-relay-proptypes/index.html b/docs/en/classic-api-reference-relay-proptypes/index.html
index 698b503eb66e3..fcd9fed56e918 100644
--- a/docs/en/classic-api-reference-relay-proptypes/index.html
+++ b/docs/en/classic-api-reference-relay-proptypes/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
+ EditRelay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
Overview
Properties
diff --git a/docs/en/classic-api-reference-relay-ql.html b/docs/en/classic-api-reference-relay-ql.html
index 2d035b867e8f6..f894723d8320b 100644
--- a/docs/en/classic-api-reference-relay-ql.html
+++ b/docs/en/classic-api-reference-relay-ql.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
+ EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
var fragment = Relay.QL`
fragment on User {
name
diff --git a/docs/en/classic-api-reference-relay-ql/index.html b/docs/en/classic-api-reference-relay-ql/index.html
index 2d035b867e8f6..f894723d8320b 100644
--- a/docs/en/classic-api-reference-relay-ql/index.html
+++ b/docs/en/classic-api-reference-relay-ql/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
+ EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
var fragment = Relay.QL`
fragment on User {
name
diff --git a/docs/en/classic-api-reference-relay-renderer.html b/docs/en/classic-api-reference-relay-renderer.html
index 8c613e8f8cdab..32e938eb39711 100644
--- a/docs/en/classic-api-reference-relay-renderer.html
+++ b/docs/en/classic-api-reference-relay-renderer.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
-
fragment
: GraphQL fragment specified using a graphql
template literal. This fragment must have a @refetchable
directive, otherwise using it will throw an error. The @refetchable
directive can only be added to fragments that are “refetchable”, that is, on fragments that are declared on Viewer
or Query
types, or on a type that implements Node
(i.e. a type that has an id
).
@@ -428,12 +428,12 @@ </List>
<Button onClick={() => loadMore(10)}>Load more friends</Button>
- </>
+ </>
);
}
-module.exports = FriendsList;
-
+module.exports = FriendsList;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal.
diff --git a/docs/en/api-reference/index.html b/docs/en/api-reference/index.html
index 4f7fea8650382..916e20bfcdadb 100644
--- a/docs/en/api-reference/index.html
+++ b/docs/en/api-reference/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditAPI Reference
Relay Hooks
+ EditAPI Reference
Relay Hooks
Relay Hooks APIs are fully compatible with React Concurrent Mode. They are also fully compatible with existing Relay APIs, meaning that they can be used together in the same application; Relay components will interop correctly regardless of whether they were written as Relay Hooks or as Relay containers.
For a usage guide, see: A Guided Tour of Relay.
For a full example using Relay Hooks and our integration with Suspense for Data Fetching, check out relay-examples/issue-tracker.
@@ -225,12 +225,12 @@ return
(
- <>
- <h1>{data.name}</h1>
- <div>
- <img src={data.profile_picture?.uri} />
- </div>
- </>
+ <>
+ <h1>{data.name}</h1>
+ <div>
+ <img src={data.profile_picture?.uri} />
+ </div>
+ </>
);
}
@@ -298,12 +298,12 @@ </Button>
- </>
+ </>
);
}
-module.exports = CommentBody;
-
+module.exports = CommentBody;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal. This fragment must have a @refetchable
directive, otherwise using it will throw an error. The @refetchable
directive can only be added to fragments that are “refetchable”, that is, on fragments that are declared on Viewer
or Query
types, or on a type that implements Node
(i.e. a type that has an id
).
@@ -428,12 +428,12 @@ </List>
<Button onClick={() => loadMore(10)}>Load more friends</Button>
- </>
+ </>
);
}
-module.exports = FriendsList;
-
+module.exports = FriendsList;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal.
diff --git a/docs/en/architecture-overview.html b/docs/en/architecture-overview.html
index 572acd0161488..79b8db6b42347 100644
--- a/docs/en/architecture-overview.html
+++ b/docs/en/architecture-overview.html
@@ -60,7 +60,7 @@
};
}
});
-
EditArchitecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
+ EditArchitecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
Core Modules
Relay Modern is composed of three core modules:
diff --git a/docs/en/architecture-overview/index.html b/docs/en/architecture-overview/index.html
index 572acd0161488..79b8db6b42347 100644
--- a/docs/en/architecture-overview/index.html
+++ b/docs/en/architecture-overview/index.html
@@ -60,7 +60,7 @@
};
}
});
-
EditArchitecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
+ EditArchitecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
Core Modules
Relay Modern is composed of three core modules:
diff --git a/docs/en/classic-api-reference-relay-container.html b/docs/en/classic-api-reference-relay-container.html
index efb99adc07cd4..d9c5899c1fceb 100644
--- a/docs/en/classic-api-reference-relay-container.html
+++ b/docs/en/classic-api-reference-relay-container.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
+ EditRelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
- Relay ensures that this data is available before the component is rendered.
- Relay updates the component whenever the underlying data has changed.
@@ -247,19 +247,19 @@ <button onclick={this.requestRandomPictureSize}>
Request random picture size
</button>
- </View>
+ </View>
);
}
}
-module.exports = Relay.createContainer(ProfilePicture, {
- initialVariables: {size: 50},
- fragments: {
- user: () => Relay.QL`
+module.exports = Relay.createContainer(ProfilePicture, {
+ initialVariables: {size: 50},
+ fragments: {
+ user: () => Relay.QL`
fragment on User { profilePicture(size: $size) { ... } }
- `,
+ `,
},
});
-
+
In this example, whenever a picture with a new size is being loaded a spinner is displayed instead of the picture.
setVariables
setVariables([partialVariables: Object, [onReadyStateChange: Function]]): void
@@ -271,35 +271,35 @@ class Feed extends React.Component {
render() {
return (
- <div>
- {this.props.viewer.feed.edges.map(
- edge => <Story story={edge.node} key={edge.node.id} />
+ <div>
+ {this.props.viewer.feed.edges.map(
+ edge => <Story story={edge.node} key={edge.node.id} />
)}
- </div>
+ </div>
);
}
_handleScrollLoad() {
// Increments the number of stories being rendered by 10.
this.props.relay.setVariables({
- count: this.props.relay.variables.count + 10
+ count: this.props.relay.variables.count + 10
});
}
}
-module.exports = Relay.createContainer(Feed, {
- initialVariables: {count: 10},
- fragments: {
- viewer: () => Relay.QL`
- fragment on Viewer {
+module.exports = Relay.createContainer(Feed, {
+ initialVariables: {count: 10},
+ fragments: {
+ viewer: () => Relay.QL`
+ fragment on Viewer {
feed(first: $count) {
edges {
node {
id,
- ${Story.getFragment('story')},
+ ${Story.getFragment('story')},
},
},
},
}
- `,
+ `,
},
});
@@ -476,10 +476,10 @@
<Child
childFragment={props.parentFragment}
size={128}
- />;
+ />;
);
}
-
+
Now Relay will both fetch the larger photo size and Child
will know to render it.
Last updated on 11/9/2017 by Jan KassensEditRelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
+ EditRelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
- Relay ensures that this data is available before the component is rendered.
- Relay updates the component whenever the underlying data has changed.
@@ -247,19 +247,19 @@ <button onclick={this.requestRandomPictureSize}>
Request random picture size
</button>
- </View>
+ </View>
);
}
}
-module.exports = Relay.createContainer(ProfilePicture, {
- initialVariables: {size: 50},
- fragments: {
- user: () => Relay.QL`
+module.exports = Relay.createContainer(ProfilePicture, {
+ initialVariables: {size: 50},
+ fragments: {
+ user: () => Relay.QL`
fragment on User { profilePicture(size: $size) { ... } }
- `,
+ `,
},
});
-
+
In this example, whenever a picture with a new size is being loaded a spinner is displayed instead of the picture.
setVariables
setVariables([partialVariables: Object, [onReadyStateChange: Function]]): void
@@ -271,35 +271,35 @@ class Feed extends React.Component {
render() {
return (
- <div>
- {this.props.viewer.feed.edges.map(
- edge => <Story story={edge.node} key={edge.node.id} />
+ <div>
+ {this.props.viewer.feed.edges.map(
+ edge => <Story story={edge.node} key={edge.node.id} />
)}
- </div>
+ </div>
);
}
_handleScrollLoad() {
// Increments the number of stories being rendered by 10.
this.props.relay.setVariables({
- count: this.props.relay.variables.count + 10
+ count: this.props.relay.variables.count + 10
});
}
}
-module.exports = Relay.createContainer(Feed, {
- initialVariables: {count: 10},
- fragments: {
- viewer: () => Relay.QL`
- fragment on Viewer {
+module.exports = Relay.createContainer(Feed, {
+ initialVariables: {count: 10},
+ fragments: {
+ viewer: () => Relay.QL`
+ fragment on Viewer {
feed(first: $count) {
edges {
node {
id,
- ${Story.getFragment('story')},
+ ${Story.getFragment('story')},
},
},
},
}
- `,
+ `,
},
});
@@ -476,10 +476,10 @@
<Child
childFragment={props.parentFragment}
size={128}
- />;
+ />;
);
}
-
+
Now Relay will both fetch the larger photo size and Child
will know to render it.
Last updated on 11/9/2017 by Jan KassensEditRelay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
+ EditRelay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
This is the lowest level of abstraction at which product code may deal with mutations in Relay, and it corresponds to the mutation operation ("a write followed by a fetch") described in the GraphQL Specification. You specify the mutation, the inputs, and the query.
Relay.GraphQLMutation
doesn't provide any bells and whistles such as fat queries or tracked queries (that is, automatic synthesis at runtime of the mutation query to be sent to the server), instead having the user define a static and explicit query. Restricting yourself to the low-level API is a useful preparatory step that will help you ready your codebase for migration to the new static Relay core. In the meantime, if you want those dynamic features, you can opt in to the higher-level Relay.Mutation
API.
Overview
@@ -56,23 +56,23 @@ Example
-const environment = new Relay.Environment();
-const query = Relay.QL`mutation FeedbackLikeMutation {
- feedbackLike(input: $input) {
+const environment = new Relay.Environment();
+const query = Relay.QL`mutation FeedbackLikeMutation {
+ feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
}
}
}`;
-const variables = {
- input: {
- feedbackId: 'aFeedbackId',
+const variables = {
+ input: {
+ feedbackId: 'aFeedbackId',
},
};
-const mutation = Relay.GraphQLMutation.create(
- query,
+const mutation = Relay.GraphQLMutation.create(
+ query,
variables,
environment
);
@@ -149,24 +149,24 @@ Example
-const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
+const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
- id
+ id
}
}
}`;
-const optimisticResponse = {
+const optimisticResponse = {
feedback: {
- doesViewerLike: true,
- id: 'aFeedbackId',
- __typename: 'Feedback',
+ doesViewerLike: true,
+ id: 'aFeedbackId',
+ __typename: 'Feedback',
},
};
-const transaction = mutation.applyOptimistic(
+const transaction = mutation.applyOptimistic(
optimisticQuery,
optimisticResponse,
);
@@ -180,8 +180,8 @@ Optionally, precede with a call to applyOptimistic()
to apply an update optimistically to the store.
Note: This method may only be called once per instance.
Example
-const configs = [{
- type: 'RANGE_ADD',
+const configs = [{
+ type: 'RANGE_ADD',
connectionName: 'topLevelComments',
edgeName: 'feedbackCommentEdge',
parentID: 'aFeedbackId',
@@ -190,7 +190,7 @@ ''
: GraphQLMutatorConstants.PREPEND,
},
}];
-const transaction = mutation.commit(configs);
+const transaction = mutation.commit(configs);
See also: Relay.Mutation::getConfigs()
rollback
diff --git a/docs/en/classic-api-reference-relay-graphql-mutation/index.html b/docs/en/classic-api-reference-relay-graphql-mutation/index.html
index a4081267ac2ee..1164e7645385a 100644
--- a/docs/en/classic-api-reference-relay-graphql-mutation/index.html
+++ b/docs/en/classic-api-reference-relay-graphql-mutation/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
+ EditRelay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
This is the lowest level of abstraction at which product code may deal with mutations in Relay, and it corresponds to the mutation operation ("a write followed by a fetch") described in the GraphQL Specification. You specify the mutation, the inputs, and the query.
Relay.GraphQLMutation
doesn't provide any bells and whistles such as fat queries or tracked queries (that is, automatic synthesis at runtime of the mutation query to be sent to the server), instead having the user define a static and explicit query. Restricting yourself to the low-level API is a useful preparatory step that will help you ready your codebase for migration to the new static Relay core. In the meantime, if you want those dynamic features, you can opt in to the higher-level Relay.Mutation
API.
Overview
@@ -56,23 +56,23 @@ Example
-const environment = new Relay.Environment();
-const query = Relay.QL`mutation FeedbackLikeMutation {
- feedbackLike(input: $input) {
+const environment = new Relay.Environment();
+const query = Relay.QL`mutation FeedbackLikeMutation {
+ feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
}
}
}`;
-const variables = {
- input: {
- feedbackId: 'aFeedbackId',
+const variables = {
+ input: {
+ feedbackId: 'aFeedbackId',
},
};
-const mutation = Relay.GraphQLMutation.create(
- query,
+const mutation = Relay.GraphQLMutation.create(
+ query,
variables,
environment
);
@@ -149,24 +149,24 @@ Example
-const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
+const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
- id
+ id
}
}
}`;
-const optimisticResponse = {
+const optimisticResponse = {
feedback: {
- doesViewerLike: true,
- id: 'aFeedbackId',
- __typename: 'Feedback',
+ doesViewerLike: true,
+ id: 'aFeedbackId',
+ __typename: 'Feedback',
},
};
-const transaction = mutation.applyOptimistic(
+const transaction = mutation.applyOptimistic(
optimisticQuery,
optimisticResponse,
);
@@ -180,8 +180,8 @@ Optionally, precede with a call to applyOptimistic()
to apply an update optimistically to the store.
Note: This method may only be called once per instance.
Example
-const configs = [{
- type: 'RANGE_ADD',
+const configs = [{
+ type: 'RANGE_ADD',
connectionName: 'topLevelComments',
edgeName: 'feedbackCommentEdge',
parentID: 'aFeedbackId',
@@ -190,7 +190,7 @@ ''
: GraphQLMutatorConstants.PREPEND,
},
}];
-const transaction = mutation.commit(configs);
+const transaction = mutation.commit(configs);
See also: Relay.Mutation::getConfigs()
rollback
diff --git a/docs/en/classic-api-reference-relay-mutation.html b/docs/en/classic-api-reference-relay-mutation.html
index a5f16032b6e7d..b58a18d1f2ace 100644
--- a/docs/en/classic-api-reference-relay-mutation.html
+++ b/docs/en/classic-api-reference-relay-mutation.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
+ EditRelay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
Overview
Properties
diff --git a/docs/en/classic-api-reference-relay-mutation/index.html b/docs/en/classic-api-reference-relay-mutation/index.html
index a5f16032b6e7d..b58a18d1f2ace 100644
--- a/docs/en/classic-api-reference-relay-mutation/index.html
+++ b/docs/en/classic-api-reference-relay-mutation/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
+ EditRelay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
Overview
Properties
diff --git a/docs/en/classic-api-reference-relay-proptypes.html b/docs/en/classic-api-reference-relay-proptypes.html
index 698b503eb66e3..fcd9fed56e918 100644
--- a/docs/en/classic-api-reference-relay-proptypes.html
+++ b/docs/en/classic-api-reference-relay-proptypes.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
+ EditRelay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
Overview
Properties
diff --git a/docs/en/classic-api-reference-relay-proptypes/index.html b/docs/en/classic-api-reference-relay-proptypes/index.html
index 698b503eb66e3..fcd9fed56e918 100644
--- a/docs/en/classic-api-reference-relay-proptypes/index.html
+++ b/docs/en/classic-api-reference-relay-proptypes/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
+ EditRelay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
Overview
Properties
diff --git a/docs/en/classic-api-reference-relay-ql.html b/docs/en/classic-api-reference-relay-ql.html
index 2d035b867e8f6..f894723d8320b 100644
--- a/docs/en/classic-api-reference-relay-ql.html
+++ b/docs/en/classic-api-reference-relay-ql.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
+ EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
var fragment = Relay.QL`
fragment on User {
name
diff --git a/docs/en/classic-api-reference-relay-ql/index.html b/docs/en/classic-api-reference-relay-ql/index.html
index 2d035b867e8f6..f894723d8320b 100644
--- a/docs/en/classic-api-reference-relay-ql/index.html
+++ b/docs/en/classic-api-reference-relay-ql/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
+ EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
var fragment = Relay.QL`
fragment on User {
name
diff --git a/docs/en/classic-api-reference-relay-renderer.html b/docs/en/classic-api-reference-relay-renderer.html
index 8c613e8f8cdab..32e938eb39711 100644
--- a/docs/en/classic-api-reference-relay-renderer.html
+++ b/docs/en/classic-api-reference-relay-renderer.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
-
fragment
: GraphQL fragment specified using a graphql
template literal.
diff --git a/docs/en/api-reference/index.html b/docs/en/api-reference/index.html
index 4f7fea8650382..916e20bfcdadb 100644
--- a/docs/en/api-reference/index.html
+++ b/docs/en/api-reference/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- API Reference
Relay Hooks
+API Reference
Relay Hooks
Relay Hooks APIs are fully compatible with React Concurrent Mode. They are also fully compatible with existing Relay APIs, meaning that they can be used together in the same application; Relay components will interop correctly regardless of whether they were written as Relay Hooks or as Relay containers.
For a usage guide, see: A Guided Tour of Relay.
For a full example using Relay Hooks and our integration with Suspense for Data Fetching, check out relay-examples/issue-tracker.
@@ -225,12 +225,12 @@return
( - <> - <h1>{data.name}</h1> - <div> - <img src={data.profile_picture?.uri} /> - </div> - </> + <> + <h1>{data.name}</h1> + <div> + <img src={data.profile_picture?.uri} /> + </div> + </> ); } @@ -298,12 +298,12 @@</Button>
- </>
+ </>
);
}
-module.exports = CommentBody;
-
+module.exports = CommentBody;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal. This fragment must have a @refetchable
directive, otherwise using it will throw an error. The @refetchable
directive can only be added to fragments that are “refetchable”, that is, on fragments that are declared on Viewer
or Query
types, or on a type that implements Node
(i.e. a type that has an id
).
@@ -428,12 +428,12 @@ </List>
<Button onClick={() => loadMore(10)}>Load more friends</Button>
- </>
+ </>
);
}
-module.exports = FriendsList;
-
+module.exports = FriendsList;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal.
diff --git a/docs/en/architecture-overview.html b/docs/en/architecture-overview.html
index 572acd0161488..79b8db6b42347 100644
--- a/docs/en/architecture-overview.html
+++ b/docs/en/architecture-overview.html
@@ -60,7 +60,7 @@
};
}
});
-
fragment
: GraphQL fragment specified using a graphql
template literal. This fragment must have a @refetchable
directive, otherwise using it will throw an error. The @refetchable
directive can only be added to fragments that are “refetchable”, that is, on fragments that are declared on Viewer
or Query
types, or on a type that implements Node
(i.e. a type that has an id
).
@@ -428,12 +428,12 @@ </List>
<Button onClick={() => loadMore(10)}>Load more friends</Button>
- </>
+ </>
);
}
-module.exports = FriendsList;
-
+module.exports = FriendsList;
+
Arguments
fragment
: GraphQL fragment specified using a graphql
template literal.
diff --git a/docs/en/architecture-overview.html b/docs/en/architecture-overview.html
index 572acd0161488..79b8db6b42347 100644
--- a/docs/en/architecture-overview.html
+++ b/docs/en/architecture-overview.html
@@ -60,7 +60,7 @@
};
}
});
-
fragment
: GraphQL fragment specified using a graphql
template literal.
diff --git a/docs/en/architecture-overview.html b/docs/en/architecture-overview.html
index 572acd0161488..79b8db6b42347 100644
--- a/docs/en/architecture-overview.html
+++ b/docs/en/architecture-overview.html
@@ -60,7 +60,7 @@
};
}
});
- Architecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
+Architecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
Core Modules
Relay Modern is composed of three core modules:
-
diff --git a/docs/en/architecture-overview/index.html b/docs/en/architecture-overview/index.html
index 572acd0161488..79b8db6b42347 100644
--- a/docs/en/architecture-overview/index.html
+++ b/docs/en/architecture-overview/index.html
@@ -60,7 +60,7 @@
};
}
});
-
Architecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
+Architecture Overview
This document, together with Runtime Architecture and Compiler Architecture, describes the high-level architecture of Relay "Modern". The intended audience includes developers interested in contributing to Relay, developers hoping to utilize the building blocks of Relay to create higher-level APIs, and anyone interested in understanding more about Relay internals. For developers wanting to learn more about using Relay to build products, the other sections might be more helpful.
Core Modules
Relay Modern is composed of three core modules:
-
diff --git a/docs/en/classic-api-reference-relay-container.html b/docs/en/classic-api-reference-relay-container.html
index efb99adc07cd4..d9c5899c1fceb 100644
--- a/docs/en/classic-api-reference-relay-container.html
+++ b/docs/en/classic-api-reference-relay-container.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
-
- Relay ensures that this data is available before the component is rendered.
- Relay updates the component whenever the underlying data has changed. @@ -247,19 +247,19 @@
- Relay ensures that this data is available before the component is rendered.
- Relay updates the component whenever the underlying data has changed. @@ -247,19 +247,19 @@
RelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
RelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
<button onclick={this.requestRandomPictureSize}>
In this example, whenever a picture with a new size is being loaded a spinner is displayed instead of the picture.
setVariables
setVariables([partialVariables: Object, [onReadyStateChange: Function]]): void
@@ -271,35 +271,35 @@ class Feed extends React.Component {
render() {
return (
- <div>
- {this.props.viewer.feed.edges.map(
- edge => <Story story={edge.node} key={edge.node.id} />
+ <div>
+ {this.props.viewer.feed.edges.map(
+ edge => <Story story={edge.node} key={edge.node.id} />
)}
- </div>
+ </div>
);
}
_handleScrollLoad() {
// Increments the number of stories being rendered by 10.
this.props.relay.setVariables({
- count: this.props.relay.variables.count + 10
+ count: this.props.relay.variables.count + 10
});
}
}
-module.exports = Relay.createContainer(Feed, {
- initialVariables: {count: 10},
- fragments: {
- viewer: () => Relay.QL`
- fragment on Viewer {
+module.exports = Relay.createContainer(Feed, {
+ initialVariables: {count: 10},
+ fragments: {
+ viewer: () => Relay.QL`
+ fragment on Viewer {
feed(first: $count) {
edges {
node {
id,
- ${Story.getFragment('story')},
+ ${Story.getFragment('story')},
},
},
},
}
- `,
+ `,
},
});
@@ -476,10 +476,10 @@ <Child childFragment={props.parentFragment} size={128} - />; + />; ); } - +
Now Relay will both fetch the larger photo size and Child
will know to render it.
RelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
RelayContainer
RelayContainer
is a higher-order React component that lets a React component encode its data requirements.
<button onclick={this.requestRandomPictureSize}>
In this example, whenever a picture with a new size is being loaded a spinner is displayed instead of the picture.
setVariables
setVariables([partialVariables: Object, [onReadyStateChange: Function]]): void
@@ -271,35 +271,35 @@ class Feed extends React.Component {
render() {
return (
- <div>
- {this.props.viewer.feed.edges.map(
- edge => <Story story={edge.node} key={edge.node.id} />
+ <div>
+ {this.props.viewer.feed.edges.map(
+ edge => <Story story={edge.node} key={edge.node.id} />
)}
- </div>
+ </div>
);
}
_handleScrollLoad() {
// Increments the number of stories being rendered by 10.
this.props.relay.setVariables({
- count: this.props.relay.variables.count + 10
+ count: this.props.relay.variables.count + 10
});
}
}
-module.exports = Relay.createContainer(Feed, {
- initialVariables: {count: 10},
- fragments: {
- viewer: () => Relay.QL`
- fragment on Viewer {
+module.exports = Relay.createContainer(Feed, {
+ initialVariables: {count: 10},
+ fragments: {
+ viewer: () => Relay.QL`
+ fragment on Viewer {
feed(first: $count) {
edges {
node {
id,
- ${Story.getFragment('story')},
+ ${Story.getFragment('story')},
},
},
},
}
- `,
+ `,
},
});
@@ -476,10 +476,10 @@ <Child childFragment={props.parentFragment} size={128} - />; + />; ); } - +
Now Relay will both fetch the larger photo size and Child
will know to render it.
Relay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
Relay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
This is the lowest level of abstraction at which product code may deal with mutations in Relay, and it corresponds to the mutation operation ("a write followed by a fetch") described in the GraphQL Specification. You specify the mutation, the inputs, and the query.
Relay.GraphQLMutation
doesn't provide any bells and whistles such as fat queries or tracked queries (that is, automatic synthesis at runtime of the mutation query to be sent to the server), instead having the user define a static and explicit query. Restricting yourself to the low-level API is a useful preparatory step that will help you ready your codebase for migration to the new static Relay core. In the meantime, if you want those dynamic features, you can opt in to the higher-level Relay.Mutation
API.
Overview
@@ -56,23 +56,23 @@Example
-const environment = new Relay.Environment();
-const query = Relay.QL`mutation FeedbackLikeMutation {
- feedbackLike(input: $input) {
+const environment = new Relay.Environment();
+const query = Relay.QL`mutation FeedbackLikeMutation {
+ feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
}
}
}`;
-const variables = {
- input: {
- feedbackId: 'aFeedbackId',
+const variables = {
+ input: {
+ feedbackId: 'aFeedbackId',
},
};
-const mutation = Relay.GraphQLMutation.create(
- query,
+const mutation = Relay.GraphQLMutation.create(
+ query,
variables,
environment
);
@@ -149,24 +149,24 @@ Example
-const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
+const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
- id
+ id
}
}
}`;
-const optimisticResponse = {
+const optimisticResponse = {
feedback: {
- doesViewerLike: true,
- id: 'aFeedbackId',
- __typename: 'Feedback',
+ doesViewerLike: true,
+ id: 'aFeedbackId',
+ __typename: 'Feedback',
},
};
-const transaction = mutation.applyOptimistic(
+const transaction = mutation.applyOptimistic(
optimisticQuery,
optimisticResponse,
);
@@ -180,8 +180,8 @@ Optionally, precede with a call to applyOptimistic()
to apply an update optimistically to the store.
Note: This method may only be called once per instance.
Example
-const configs = [{
- type: 'RANGE_ADD',
+const configs = [{
+ type: 'RANGE_ADD',
connectionName: 'topLevelComments',
edgeName: 'feedbackCommentEdge',
parentID: 'aFeedbackId',
@@ -190,7 +190,7 @@ ''
: GraphQLMutatorConstants.PREPEND,
},
}];
-const transaction = mutation.commit(configs);
+const transaction = mutation.commit(configs);
const environment = new Relay.Environment();
-const query = Relay.QL`mutation FeedbackLikeMutation {
- feedbackLike(input: $input) {
+const environment = new Relay.Environment();
+const query = Relay.QL`mutation FeedbackLikeMutation {
+ feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
}
}
}`;
-const variables = {
- input: {
- feedbackId: 'aFeedbackId',
+const variables = {
+ input: {
+ feedbackId: 'aFeedbackId',
},
};
-const mutation = Relay.GraphQLMutation.create(
- query,
+const mutation = Relay.GraphQLMutation.create(
+ query,
variables,
environment
);
@@ -149,24 +149,24 @@ Example
-const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
+const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
- id
+ id
}
}
}`;
-const optimisticResponse = {
+const optimisticResponse = {
feedback: {
- doesViewerLike: true,
- id: 'aFeedbackId',
- __typename: 'Feedback',
+ doesViewerLike: true,
+ id: 'aFeedbackId',
+ __typename: 'Feedback',
},
};
-const transaction = mutation.applyOptimistic(
+const transaction = mutation.applyOptimistic(
optimisticQuery,
optimisticResponse,
);
@@ -180,8 +180,8 @@ Optionally, precede with a call to applyOptimistic()
to apply an update optimistically to the store.
Note: This method may only be called once per instance.
Example
-const configs = [{
- type: 'RANGE_ADD',
+const configs = [{
+ type: 'RANGE_ADD',
connectionName: 'topLevelComments',
edgeName: 'feedbackCommentEdge',
parentID: 'aFeedbackId',
@@ -190,7 +190,7 @@ ''
See also: Relay.Mutation::getConfigs()
rollback
diff --git a/docs/en/classic-api-reference-relay-graphql-mutation/index.html b/docs/en/classic-api-reference-relay-graphql-mutation/index.html index a4081267ac2ee..1164e7645385a 100644 --- a/docs/en/classic-api-reference-relay-graphql-mutation/index.html +++ b/docs/en/classic-api-reference-relay-graphql-mutation/index.html @@ -4,7 +4,7 @@ {"zIndex":100} ) }); -Relay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
Relay.GraphQLMutation
Relay.GraphQLMutation
is a low-level API for modeling a GraphQL mutation.
This is the lowest level of abstraction at which product code may deal with mutations in Relay, and it corresponds to the mutation operation ("a write followed by a fetch") described in the GraphQL Specification. You specify the mutation, the inputs, and the query.
Relay.GraphQLMutation
doesn't provide any bells and whistles such as fat queries or tracked queries (that is, automatic synthesis at runtime of the mutation query to be sent to the server), instead having the user define a static and explicit query. Restricting yourself to the low-level API is a useful preparatory step that will help you ready your codebase for migration to the new static Relay core. In the meantime, if you want those dynamic features, you can opt in to the higher-level Relay.Mutation
API.
Overview
@@ -56,23 +56,23 @@Example
-const environment = new Relay.Environment();
-const query = Relay.QL`mutation FeedbackLikeMutation {
- feedbackLike(input: $input) {
+const environment = new Relay.Environment();
+const query = Relay.QL`mutation FeedbackLikeMutation {
+ feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
}
}
}`;
-const variables = {
- input: {
- feedbackId: 'aFeedbackId',
+const variables = {
+ input: {
+ feedbackId: 'aFeedbackId',
},
};
-const mutation = Relay.GraphQLMutation.create(
- query,
+const mutation = Relay.GraphQLMutation.create(
+ query,
variables,
environment
);
@@ -149,24 +149,24 @@ Example
-const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
+const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
- id
+ id
}
}
}`;
-const optimisticResponse = {
+const optimisticResponse = {
feedback: {
- doesViewerLike: true,
- id: 'aFeedbackId',
- __typename: 'Feedback',
+ doesViewerLike: true,
+ id: 'aFeedbackId',
+ __typename: 'Feedback',
},
};
-const transaction = mutation.applyOptimistic(
+const transaction = mutation.applyOptimistic(
optimisticQuery,
optimisticResponse,
);
@@ -180,8 +180,8 @@ Optionally, precede with a call to applyOptimistic()
to apply an update optimistically to the store.
Note: This method may only be called once per instance.
Example
-const configs = [{
- type: 'RANGE_ADD',
+const configs = [{
+ type: 'RANGE_ADD',
connectionName: 'topLevelComments',
edgeName: 'feedbackCommentEdge',
parentID: 'aFeedbackId',
@@ -190,7 +190,7 @@ ''
: GraphQLMutatorConstants.PREPEND,
},
}];
-const transaction = mutation.commit(configs);
+const transaction = mutation.commit(configs);
const environment = new Relay.Environment();
-const query = Relay.QL`mutation FeedbackLikeMutation {
- feedbackLike(input: $input) {
+const environment = new Relay.Environment();
+const query = Relay.QL`mutation FeedbackLikeMutation {
+ feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
}
}
}`;
-const variables = {
- input: {
- feedbackId: 'aFeedbackId',
+const variables = {
+ input: {
+ feedbackId: 'aFeedbackId',
},
};
-const mutation = Relay.GraphQLMutation.create(
- query,
+const mutation = Relay.GraphQLMutation.create(
+ query,
variables,
environment
);
@@ -149,24 +149,24 @@ Example
-const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
+const optimisticQuery = Relay.QL`mutation FeedbackLikeOptimisticUpdate {
feedbackLike(input: $input) {
clientMutationId
feedback {
doesViewerLike
- id
+ id
}
}
}`;
-const optimisticResponse = {
+const optimisticResponse = {
feedback: {
- doesViewerLike: true,
- id: 'aFeedbackId',
- __typename: 'Feedback',
+ doesViewerLike: true,
+ id: 'aFeedbackId',
+ __typename: 'Feedback',
},
};
-const transaction = mutation.applyOptimistic(
+const transaction = mutation.applyOptimistic(
optimisticQuery,
optimisticResponse,
);
@@ -180,8 +180,8 @@ Optionally, precede with a call to applyOptimistic()
to apply an update optimistically to the store.
Note: This method may only be called once per instance.
Example
-const configs = [{
- type: 'RANGE_ADD',
+const configs = [{
+ type: 'RANGE_ADD',
connectionName: 'topLevelComments',
edgeName: 'feedbackCommentEdge',
parentID: 'aFeedbackId',
@@ -190,7 +190,7 @@ ''
See also: Relay.Mutation::getConfigs()
rollback
diff --git a/docs/en/classic-api-reference-relay-mutation.html b/docs/en/classic-api-reference-relay-mutation.html index a5f16032b6e7d..b58a18d1f2ace 100644 --- a/docs/en/classic-api-reference-relay-mutation.html +++ b/docs/en/classic-api-reference-relay-mutation.html @@ -4,7 +4,7 @@ {"zIndex":100} ) }); -Relay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
Relay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
Overview
Properties
-
diff --git a/docs/en/classic-api-reference-relay-mutation/index.html b/docs/en/classic-api-reference-relay-mutation/index.html
index a5f16032b6e7d..b58a18d1f2ace 100644
--- a/docs/en/classic-api-reference-relay-mutation/index.html
+++ b/docs/en/classic-api-reference-relay-mutation/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
-
Relay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
Relay.Mutation
Relay makes use of GraphQL mutations; operations that enable us to mutate data on the client and server. To create a mutation for use in our app, we subclass Relay.Mutation
and implement, at minimum, the four abstract methods listed below.
Overview
Properties
-
diff --git a/docs/en/classic-api-reference-relay-proptypes.html b/docs/en/classic-api-reference-relay-proptypes.html
index 698b503eb66e3..fcd9fed56e918 100644
--- a/docs/en/classic-api-reference-relay-proptypes.html
+++ b/docs/en/classic-api-reference-relay-proptypes.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
-
Relay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
Relay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
Overview
Properties
-
diff --git a/docs/en/classic-api-reference-relay-proptypes/index.html b/docs/en/classic-api-reference-relay-proptypes/index.html
index 698b503eb66e3..fcd9fed56e918 100644
--- a/docs/en/classic-api-reference-relay-proptypes/index.html
+++ b/docs/en/classic-api-reference-relay-proptypes/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
-
Relay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
Relay.PropTypes
Relay introduces two new classes of objects: RelayContainer
and Relay.Route
. Relay.PropTypes
provides prop validators used to assert that props are of these types.
Overview
Properties
-
diff --git a/docs/en/classic-api-reference-relay-ql.html b/docs/en/classic-api-reference-relay-ql.html
index 2d035b867e8f6..f894723d8320b 100644
--- a/docs/en/classic-api-reference-relay-ql.html
+++ b/docs/en/classic-api-reference-relay-ql.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
-
Relay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
Relay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
var fragment = Relay.QL`
fragment on User {
name
diff --git a/docs/en/classic-api-reference-relay-ql/index.html b/docs/en/classic-api-reference-relay-ql/index.html
index 2d035b867e8f6..f894723d8320b 100644
--- a/docs/en/classic-api-reference-relay-ql/index.html
+++ b/docs/en/classic-api-reference-relay-ql/index.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
- EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
+ EditRelay.QL
Relay fragments, mutations, and queries must be specified using ES6 template literals tagged with Relay.QL
. For example:
var fragment = Relay.QL`
fragment on User {
name
diff --git a/docs/en/classic-api-reference-relay-renderer.html b/docs/en/classic-api-reference-relay-renderer.html
index 8c613e8f8cdab..32e938eb39711 100644
--- a/docs/en/classic-api-reference-relay-renderer.html
+++ b/docs/en/classic-api-reference-relay-renderer.html
@@ -4,7 +4,7 @@
{"zIndex":100}
)
});
-