From 6937c908239d995ee20c582241c7758db01f39ac Mon Sep 17 00:00:00 2001 From: Relay Bot Date: Fri, 10 Jul 2020 21:26:44 +0000 Subject: [PATCH] Deploy website Deploy website version based on 6cee5e2906aff2cefc518e5e69052cd6949d7b5a --- docs/en/api-reference.html | 294 ++++++++++++++---- docs/en/api-reference/index.html | 294 ++++++++++++++---- docs/en/experimental/api-reference.html | 292 +++++++++++++---- docs/en/experimental/api-reference/index.html | 292 +++++++++++++---- docs/en/v1.4.1/api-reference.html | 294 ++++++++++++++---- docs/en/v1.4.1/api-reference/index.html | 294 ++++++++++++++---- docs/en/v1.5.0/api-reference.html | 294 ++++++++++++++---- docs/en/v1.5.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v1.6.0/api-reference.html | 294 ++++++++++++++---- docs/en/v1.6.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v1.6.1/api-reference.html | 294 ++++++++++++++---- docs/en/v1.6.1/api-reference/index.html | 294 ++++++++++++++---- docs/en/v1.6.2/api-reference.html | 294 ++++++++++++++---- docs/en/v1.6.2/api-reference/index.html | 294 ++++++++++++++---- docs/en/v1.7.0/api-reference.html | 294 ++++++++++++++---- docs/en/v1.7.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v2.0.0/api-reference.html | 294 ++++++++++++++---- docs/en/v2.0.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v3.0.0/api-reference.html | 294 ++++++++++++++---- docs/en/v3.0.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v4.0.0/api-reference.html | 294 ++++++++++++++---- docs/en/v4.0.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v5.0.0/api-reference.html | 294 ++++++++++++++---- docs/en/v5.0.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v6.0.0/api-reference.html | 294 ++++++++++++++---- docs/en/v6.0.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v7.0.0/api-reference.html | 294 ++++++++++++++---- docs/en/v7.0.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v7.1.0/api-reference.html | 294 ++++++++++++++---- docs/en/v7.1.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v8.0.0/api-reference.html | 294 ++++++++++++++---- docs/en/v8.0.0/api-reference/index.html | 294 ++++++++++++++---- docs/en/v9.0.0/api-reference.html | 294 ++++++++++++++---- docs/en/v9.0.0/api-reference/index.html | 294 ++++++++++++++---- 34 files changed, 7886 insertions(+), 2106 deletions(-) diff --git a/docs/en/api-reference.html b/docs/en/api-reference.html index d31a272be5d98..4d976445bb818 100644 --- a/docs/en/api-reference.html +++ b/docs/en/api-reference.html @@ -66,69 +66,174 @@

module.exports = Root; +

useQueryLoader

+

Hook used to make it easy to safely load queries, while avoiding data leaking into the Relay store. It will keep a query reference stored in state, and dispose of it when it is no longer accessible via state.

+

This hook is designed to be used with usePreloadedQuery to implement the “render-as-you-fetch” pattern.

+
const React = require('React');
+const {useQueryLoader, usePreloadedQuery} = require('react-relay/hooks');
+
+const query = graphql`
+  query AppQuery($id: ID!) {
+    user(id: $id) {
+      name
+    }
+  }
+`;
+
+function QueryFetcherExample(): React.MixedElement {
+  const [
+    queryReference,
+    loadQuery,
+    disposeQuery,
+  ] = useQueryLoader(query);
+
+  return (<>
+    {
+      queryReference == null && (<Button
+        onClick={() => loadQuery({})}
+      >
+        Click to reveal the name
+      </Button>)
+    }
+    {
+      queryReference != null && (<>
+        <Button onClick={disposeQuery}>
+          Click to hide the name and dispose the query.
+        </Button>
+        <React.Suspense fallback="Loading">
+          <NameDisplay queryReference={queryReference} />
+        </React.Suspense>
+      </>)
+    }
+  </>);
+}
+
+function NameDisplay({ queryReference }) {
+  const data = usePreloadedQuery<AppQuery>(query, queryReference);
+
+  return <h1>{data.user?.name}</h1>;
+}
+
+

Arguments

+ +

Flow Type Parameters

+ +

Return Value

+

A tuple containing the following values:

+ +

Behavior

+

usePreloadedQuery

-

Hook used to access data fetched by an earlier call to preloadQuery(). This implements the "Render-as-You-Fetch" pattern:

+

Hook used to access data fetched by an earlier call to loadQuery()[#loadquery] or from useQueryLoader[#usequeryloader]. This implements the "Render-as-You-Fetch" pattern:

+ -

usePreloadedQuery() will suspend if the query is still pending, throw an error if it failed, and otherwise return the query results. This pattern is encouraged over useLazyLoadQuery() as it can allow fetching data earlier while not blocking rendering.

-
import type {AppQuery} from 'AppQuery.graphql';
+
const React = require('React');
+const {useQueryLoader, usePreloadedQuery} = require('react-relay/hooks');
 
-const React = require('React');
-const {graphql, preloadQuery, usePreloadedQuery} = require('react-relay/hooks');
-
-const AppEnvironment = require('./AppEnvironment'); // user-defined
-
-const query = graphql`
+const query = graphql`
   query AppQuery($id: ID!) {
     user(id: $id) {
       name
     }
   }
-`;
-
-// Note: call in an event-handler or similar, not during render
-const result = preloadQuery(
-  AppEnvironment,
-  query,
-  {id: '4'},
-  {fetchPolicy: 'store-or-network'},
-);
+`;
+
+function QueryFetcherExample(): React.MixedElement {
+  const [
+    queryReference,
+    loadQuery,
+    disposeQuery,
+  ] = useQueryLoader(query);
+
+  return (<>
+    {
+      queryReference == null && (<Button
+        onClick={() => loadQuery({})}
+      >
+        Click to reveal the name
+      </Button>)
+    }
+    {
+      queryReference != null && (<>
+        <Button onClick={disposeQuery}>
+          Click to hide the name and dispose the query.
+        </Button>
+        <React.Suspense fallback="Loading">
+          <NameDisplay queryReference={queryReference} />
+        </React.Suspense>
+      </>)
+    }
+  </>);
+}
 
-function App() {
-  const data = usePreloadedQuery<AppQuery>(query, result);
+function NameDisplay({ queryReference }) {
+  const data = usePreloadedQuery<AppQuery>(query, queryReference);
 
-  return <h1>{data.user?.name}</h1>;
+  return <h1>{data.user?.name}</h1>;
 }
 

-
Arguments

+
Arguments

 
    
 
  • query: GraphQL query specified using a graphql template literal.
    • 
-
  • preloadedQuery: The result of calling preloadQuery(). Note that the same query should be used in the call to preloadQuery() and usePreloadedQuery().
    • 
+
  • preloadedQuery: The result of calling preloadQuery_DEPRECATED(). Note that the same query should be used in the call to preloadQuery_DEPRECATED() and usePreloadedQuery().
    • 
 

-
Flow Type Parameters

+
Flow Type Parameters

 
    
 
  • TQuery: Type parameter that should correspond to the Flow type for the specified query. This type is available to import from the the auto-generated file: <query_name>.graphql.js.
    • 
 

-
Return Value

+
Return Value

 
    
 
  • data: Object that contains data which has been read out from the Relay store; the object matches the shape of specified query.
 
      
 
    • The Flow type for data will also match this shape, and contain types derived from the GraphQL Schema. For example, the type of data above is: {| user: ?{| name: ?string |} |}.
      • 
 
    • 
 

-
Behavior

+
Behavior

 
    
 
  • It is expected for usePreloadedQuery to have been rendered under a RelayEnvironmentProvider, in order to access the correct Relay environment, otherwise an error will be thrown.
    • 
-
  • Calling usePreloadedQuery will return the data for this query if the preloadQuery() call has completed. It will suspend while the network request is in flight. If usePreloadedQuery causes the component to suspend, you'll need to make sure that there's a Suspense ancestor wrapping this component in order to show the appropriate loading state. This hook will throw an error if the preloadQuery() fetch fails.
+
  • Calling usePreloadedQuery will return the data for this query if the preloadQuery_DEPRECATED() call has completed. It will suspend while the network request is in flight. If usePreloadedQuery causes the component to suspend, you'll need to make sure that there's a Suspense ancestor wrapping this component in order to show the appropriate loading state. This hook will throw an error if the preloadQuery_DEPRECATED() fetch fails.
 
    • 
 
  • The component is automatically subscribed to updates to the query data: if the data for this query is updated anywhere in the app, the component will automatically re-render with the latest updated data.
    • 
 

 
useLazyLoadQuery

-
Hook used to fetch a GraphQL query during render. Note that this pattern is generally not recommended: where possible, prefer preloadQuery() and usePreloadedQuery() instead.

+
Hook used to fetch a GraphQL query during render. This hook can trigger multiple round trips, thereby degrading performance. Instead, prefer useQueryLoader() and usePreloadedQuery() instead.

 
import type {AppQuery} from 'AppQuery.graphql';
 
 const React = require('React');
@@ -151,7 +256,7 @@ 
return <h1>{data.user?.name}</h1>;
 }
 

-
Arguments

+
Arguments
-

Arguments

+

Arguments

-

Flow Type Parameters

+

Flow Type Parameters

-

Return Value

+

Return Value

Tuple containing the following values