diff --git a/en/index.html b/en/index.html index 1c471bc9b327f..cee8bf80ccd2a 100644 --- a/en/index.html +++ b/en/index.html @@ -7,77 +7,77 @@

Relay

v9.1.0

Black Lives Matter. Support the Equal Justice Initiative.

RelayThe production-ready GraphQL client for React.

Built for scale

Relay was designed to be performant from the ground up, and to support scaling your application to thousands of components, while keeping management of data fetching sane, and fast iteration speeds as your application grows and changes.

Quick iteration

Relay is built upon locally declaring data dependencies for components. This means each component declares what data that it needs, without worrying about how to fetch it; Relay guarantees that the data each component needs is fetched and available.

This allows components and their data dependencies to be modified quickly and in isolation, without needing to update other parts of the system or, worrying about breaking other components

Minimal round trips

Relay automatically aggregates the data requirements for your entire application, so that they can be fetched in a single GraphQL request.

Relay will handle all of the heavy lifting to ensure the data declared by your components is fetched in the most efficient way, for example by deduplicating identical fields, fetching as early as possible, among other optimizations.

Automatic data consistency

-

Relay automatically keeps all of your components up to date whenever data that affects them changes, and efficiently update them only when strictly necessary.

Relay also supports executing GraphQL Mutations, optionally with optimistic updates, and updates to local data, while ensuring that visible data on the screen is always kept up to date.

Query Renderer

When creating a new screen, you start with a QueryRenderer.

A QueryRenderer is a React Component which is the root of a Relay component tree. It handles fetching your query, and uses the render prop to render the resulting data.

As React components, QueryRenderers can be rendered anywhere that a React component can be rendered, i.e. not just at the top level but *within* other components or containers. For example, you could use a QueryRenderer to lazily fetch additional data for a popover.


-import React from "react"
-import { createFragmentContainer, graphql, QueryRenderer } from "react-relay"
-import environment from "./lib/createRelayEnvironment"
-import ArtistHeader from "./ArtistHeader" // Below
+

Relay automatically keeps all of your components up to date whenever data that affects them changes, and efficiently update them only when strictly necessary.

Relay also supports executing GraphQL Mutations, optionally with optimistic updates, and updates to local data, while ensuring that visible data on the screen is always kept up to date.

Query Renderer

When creating a new screen, you start with a QueryRenderer.

A QueryRenderer is a React Component which is the root of a Relay component tree. It handles fetching your query, and uses the render prop to render the resulting data.

As React components, QueryRenderers can be rendered anywhere that a React component can be rendered, i.e. not just at the top level but *within* other components or containers. For example, you could use a QueryRenderer to lazily fetch additional data for a popover.


+import React from "react"
+import { createFragmentContainer, graphql, QueryRenderer } from "react-relay"
+import environment from "./lib/createRelayEnvironment"
+import ArtistHeader from "./ArtistHeader"
 
-// You can usually use one query renderer per page
-// and it represents the root of a query
-export default function ArtistRenderer({artistID}) {
-  return (
-    <QueryRenderer
-      environment={environment}
-      query={graphql`
-        query QueryRenderersArtistQuery($artistID: String!) {
-          # The root field for the query
-          artist(id: $artistID) {
-            # A reference to your fragment container
-            ...ArtistHeader_artist
-          }
-        }
-      `}
-      variables={{artistID}}
-      render={({error, props}) => {
-        if (error) {
-          return <div>{error.message}</div>;
-        } else if (props) {
-          return <Artist artist={props.artist} />;
-        }
-        return <div>Loading</div>;
-      }}
-    />
-  );
-}
-

Fragment Container

Step two is to render a tree of React components powered by Relay, which may include FragmentContainers, PaginationContainers, or RefetchContainers.

The most common are FragmentContainers, which you can use to declare a specification of the data that a Component will need in order to render. Note that a FragmentContainer won't directly fetch the data; instead, the data will be fetched by a QueryRenderer ancestor at the root, which will aggregate all of the data needed for a tree of Relay components, and fetch it in a *single round trip*.

Relay will then guarantee that the data declared by aFragmentContainer is available *before* rendering the component.


-import React from "react"
-import { createFragmentContainer, graphql } from "react-relay"
-import { Link, Image, Name, Bio, View,} from "./views"
+// Below you can usually use one query renderer per page
+// and it represents the root of a query
+export default function ArtistRenderer({artistID}) {
+  return (
+    <QueryRenderer
+      environment={environment}
+      query={graphql`
+        query QueryRenderersArtistQuery($artistID: String!) {
+          # The root field for the query
+          artist(id: $artistID) {
+            # A reference to your fragment container
+            ...ArtistHeader_artist
+          }
+        }
+      `}
+      variables={{artistID}}
+      render={({error, props}) => {
+        if (error) {
+          return <div>{error.message}</div>;
+        } else if (props) {
+          return <Artist artist={props.artist} />;
+        }
+        return <div>Loading</div>;
+      }}
+    />
+  );
+}
+

Fragment Container

Step two is to render a tree of React components powered by Relay, which may include FragmentContainers, PaginationContainers, or RefetchContainers.

The most common are FragmentContainers, which you can use to declare a specification of the data that a Component will need in order to render. Note that a FragmentContainer won't directly fetch the data; instead, the data will be fetched by a QueryRenderer ancestor at the root, which will aggregate all of the data needed for a tree of Relay components, and fetch it in a *single round trip*.

Relay will then guarantee that the data declared by aFragmentContainer is available *before* rendering the component.


+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { Link, Image, Name, Bio, View,} from "./views"
 
-function ArtistHeader(props) {
-  const {name, href, image, bio} = props.artist;
-  const imageUrl = image && image.url;
+function ArtistHeader(props) {
+  const {name, href, image, bio} = props.artist;
+  const imageUrl = image && image.url;
 
-  return (
-    <Link href={href}>
-      <Image imageUrl={imageUrl} />
-      <View>
-        <Name>{name}</Name>
-        <Bio>{bio}</Bio>
-      </View>
-    </Link>
-  );
-}
+  return (
+    <Link href={href}>
+      <Image imageUrl={imageUrl} />
+      <View>
+        <Name>{name}</Name>
+        <Bio>{bio}</Bio>
+      </View>
+    </Link>
+  );
+}
 
-export default createFragmentContainer(ArtistHeader, {
-  artist: graphql`
-    # This fragment is declaring that this component
-    # needs an Artist, and these specific fields on
-    # the Artist in order to render. Relay will
-    # guarantee that this data is fetched and available
-    # for this component.
-    fragment ArtistHeader_artist on Artist {
+export default createFragmentContainer(ArtistHeader, {
+  artist: graphql`
+    # This fragment is declaring that this component
+    # needs an Artist, and these specific fields on
+    # the Artist in order to render. Relay will
+    # guarantee that this data is fetched and available
+    # for this component.
+    fragment ArtistHeader_artist on Artist {
       href
       bio
       name
-      image {
+      image {
         url
-      }
-    }
-  `,
-});
-

GraphQL best practices baked in

Relay applies and relies on GraphQL best practices. To get the most from Relay’s features, you’ll want your GraphQL server to conform to these standard practices.

Fragments

+ } + } + `, +}); +

GraphQL best practices baked in

Relay applies and relies on GraphQL best practices. To get the most from Relay’s features, you’ll want your GraphQL server to conform to these standard practices.

Fragments

A GraphQL Fragment is a reusable selection of fields for a given GraphQL type. It can be composed by including it in other Fragments, or including it as part of GraphQL Queries.

Relay uses Fragments to declare data requirements for components, and compose data requirements together.

See the Fragment Container docs

Connections

GraphQL Connections are a model for representing lists of data in GraphQL, so that they can easily be paginated in any direction, as well as to be able to encode rich relationship data.

GraphQL Connections are considered a best practice for Pagination in GraphQL, and Relay provides first class support for these, as long as your GraphQL server supports them.

See the Connections docs

Global Object Identification

Relay relies on Global Object Identification to provide reliable caching and refetching, and to make it possible to automatically merge updates for objects.

Global Object Identification consists on providing globally unique ids across your entire schema for every type, built using the Node GraphQL interface.

See the Object Identification docs

Flexible Mutations

Describe data changing

diff --git a/index.html b/index.html index 1c471bc9b327f..cee8bf80ccd2a 100644 --- a/index.html +++ b/index.html @@ -7,77 +7,77 @@

Relay

v9.1.0

Black Lives Matter. Support the Equal Justice Initiative.

RelayThe production-ready GraphQL client for React.

Built for scale

Relay was designed to be performant from the ground up, and to support scaling your application to thousands of components, while keeping management of data fetching sane, and fast iteration speeds as your application grows and changes.

Quick iteration

Relay is built upon locally declaring data dependencies for components. This means each component declares what data that it needs, without worrying about how to fetch it; Relay guarantees that the data each component needs is fetched and available.

This allows components and their data dependencies to be modified quickly and in isolation, without needing to update other parts of the system or, worrying about breaking other components

Minimal round trips

Relay automatically aggregates the data requirements for your entire application, so that they can be fetched in a single GraphQL request.

Relay will handle all of the heavy lifting to ensure the data declared by your components is fetched in the most efficient way, for example by deduplicating identical fields, fetching as early as possible, among other optimizations.

Automatic data consistency

-

Relay automatically keeps all of your components up to date whenever data that affects them changes, and efficiently update them only when strictly necessary.

Relay also supports executing GraphQL Mutations, optionally with optimistic updates, and updates to local data, while ensuring that visible data on the screen is always kept up to date.

Query Renderer

When creating a new screen, you start with a QueryRenderer.

A QueryRenderer is a React Component which is the root of a Relay component tree. It handles fetching your query, and uses the render prop to render the resulting data.

As React components, QueryRenderers can be rendered anywhere that a React component can be rendered, i.e. not just at the top level but *within* other components or containers. For example, you could use a QueryRenderer to lazily fetch additional data for a popover.


-import React from "react"
-import { createFragmentContainer, graphql, QueryRenderer } from "react-relay"
-import environment from "./lib/createRelayEnvironment"
-import ArtistHeader from "./ArtistHeader" // Below
+

Relay automatically keeps all of your components up to date whenever data that affects them changes, and efficiently update them only when strictly necessary.

Relay also supports executing GraphQL Mutations, optionally with optimistic updates, and updates to local data, while ensuring that visible data on the screen is always kept up to date.

Query Renderer

When creating a new screen, you start with a QueryRenderer.

A QueryRenderer is a React Component which is the root of a Relay component tree. It handles fetching your query, and uses the render prop to render the resulting data.

As React components, QueryRenderers can be rendered anywhere that a React component can be rendered, i.e. not just at the top level but *within* other components or containers. For example, you could use a QueryRenderer to lazily fetch additional data for a popover.


+import React from "react"
+import { createFragmentContainer, graphql, QueryRenderer } from "react-relay"
+import environment from "./lib/createRelayEnvironment"
+import ArtistHeader from "./ArtistHeader"
 
-// You can usually use one query renderer per page
-// and it represents the root of a query
-export default function ArtistRenderer({artistID}) {
-  return (
-    <QueryRenderer
-      environment={environment}
-      query={graphql`
-        query QueryRenderersArtistQuery($artistID: String!) {
-          # The root field for the query
-          artist(id: $artistID) {
-            # A reference to your fragment container
-            ...ArtistHeader_artist
-          }
-        }
-      `}
-      variables={{artistID}}
-      render={({error, props}) => {
-        if (error) {
-          return <div>{error.message}</div>;
-        } else if (props) {
-          return <Artist artist={props.artist} />;
-        }
-        return <div>Loading</div>;
-      }}
-    />
-  );
-}
-

Fragment Container

Step two is to render a tree of React components powered by Relay, which may include FragmentContainers, PaginationContainers, or RefetchContainers.

The most common are FragmentContainers, which you can use to declare a specification of the data that a Component will need in order to render. Note that a FragmentContainer won't directly fetch the data; instead, the data will be fetched by a QueryRenderer ancestor at the root, which will aggregate all of the data needed for a tree of Relay components, and fetch it in a *single round trip*.

Relay will then guarantee that the data declared by aFragmentContainer is available *before* rendering the component.


-import React from "react"
-import { createFragmentContainer, graphql } from "react-relay"
-import { Link, Image, Name, Bio, View,} from "./views"
+// Below you can usually use one query renderer per page
+// and it represents the root of a query
+export default function ArtistRenderer({artistID}) {
+  return (
+    <QueryRenderer
+      environment={environment}
+      query={graphql`
+        query QueryRenderersArtistQuery($artistID: String!) {
+          # The root field for the query
+          artist(id: $artistID) {
+            # A reference to your fragment container
+            ...ArtistHeader_artist
+          }
+        }
+      `}
+      variables={{artistID}}
+      render={({error, props}) => {
+        if (error) {
+          return <div>{error.message}</div>;
+        } else if (props) {
+          return <Artist artist={props.artist} />;
+        }
+        return <div>Loading</div>;
+      }}
+    />
+  );
+}
+

Fragment Container

Step two is to render a tree of React components powered by Relay, which may include FragmentContainers, PaginationContainers, or RefetchContainers.

The most common are FragmentContainers, which you can use to declare a specification of the data that a Component will need in order to render. Note that a FragmentContainer won't directly fetch the data; instead, the data will be fetched by a QueryRenderer ancestor at the root, which will aggregate all of the data needed for a tree of Relay components, and fetch it in a *single round trip*.

Relay will then guarantee that the data declared by aFragmentContainer is available *before* rendering the component.


+import React from "react"
+import { createFragmentContainer, graphql } from "react-relay"
+import { Link, Image, Name, Bio, View,} from "./views"
 
-function ArtistHeader(props) {
-  const {name, href, image, bio} = props.artist;
-  const imageUrl = image && image.url;
+function ArtistHeader(props) {
+  const {name, href, image, bio} = props.artist;
+  const imageUrl = image && image.url;
 
-  return (
-    <Link href={href}>
-      <Image imageUrl={imageUrl} />
-      <View>
-        <Name>{name}</Name>
-        <Bio>{bio}</Bio>
-      </View>
-    </Link>
-  );
-}
+  return (
+    <Link href={href}>
+      <Image imageUrl={imageUrl} />
+      <View>
+        <Name>{name}</Name>
+        <Bio>{bio}</Bio>
+      </View>
+    </Link>
+  );
+}
 
-export default createFragmentContainer(ArtistHeader, {
-  artist: graphql`
-    # This fragment is declaring that this component
-    # needs an Artist, and these specific fields on
-    # the Artist in order to render. Relay will
-    # guarantee that this data is fetched and available
-    # for this component.
-    fragment ArtistHeader_artist on Artist {
+export default createFragmentContainer(ArtistHeader, {
+  artist: graphql`
+    # This fragment is declaring that this component
+    # needs an Artist, and these specific fields on
+    # the Artist in order to render. Relay will
+    # guarantee that this data is fetched and available
+    # for this component.
+    fragment ArtistHeader_artist on Artist {
       href
       bio
       name
-      image {
+      image {
         url
-      }
-    }
-  `,
-});
-

GraphQL best practices baked in

Relay applies and relies on GraphQL best practices. To get the most from Relay’s features, you’ll want your GraphQL server to conform to these standard practices.

Fragments

+ } + } + `, +}); +

GraphQL best practices baked in

Relay applies and relies on GraphQL best practices. To get the most from Relay’s features, you’ll want your GraphQL server to conform to these standard practices.

Fragments

A GraphQL Fragment is a reusable selection of fields for a given GraphQL type. It can be composed by including it in other Fragments, or including it as part of GraphQL Queries.

Relay uses Fragments to declare data requirements for components, and compose data requirements together.

See the Fragment Container docs

Connections

GraphQL Connections are a model for representing lists of data in GraphQL, so that they can easily be paginated in any direction, as well as to be able to encode rich relationship data.

GraphQL Connections are considered a best practice for Pagination in GraphQL, and Relay provides first class support for these, as long as your GraphQL server supports them.

See the Connections docs

Global Object Identification

Relay relies on Global Object Identification to provide reliable caching and refetching, and to make it possible to automatically merge updates for objects.

Global Object Identification consists on providing globally unique ids across your entire schema for every type, built using the Node GraphQL interface.

See the Object Identification docs

Flexible Mutations

Describe data changing