Add v11.0.0 version

Reviewed By: jstejada

Differential Revision: D26901727

fbshipit-source-id: 9b75ccb3beedcda3f865fc5d458e8fcecd22c3a8

website-v2/versioned_docs/version-11.0.0/api-reference/entrypoint-apis/entrypoint-container.md

@@ -0,0 +1,33 @@
+---
+id: entrypoint-container
+title: EntryPointContainer
+slug: /api-reference/entrypoint-container/
+---
+
+import DocsRating from '../../../../src/core/DocsRating';
+import {OssOnly, FbInternalOnly} from 'internaldocs-fb-helpers';
+
+## `EntryPointContainer`
+
+<FbInternalOnly>
+
+For more information, see the [Defining EntryPoints](../../guides/entrypoints/using-entrypoints/#defining-entrypoints) and [Consuming EntryPoints](../../guides/entrypoints/using-entrypoints/#-entrypoints) guides.
+
+</FbInternalOnly>
+
+```js
+function EntryPointContainer({
+  entryPointReference,
+  props,
+}: {|
+  +entryPointReference: PreloadedEntryPoint<TEntryPointComponent>,
+  +props: TRuntimeProps,
+|}): ReactElement
+```
+
+A React component that renders a preloaded EntryPoint.
+
+* `entryPointReference`: the value returned from a call to `loadEntryPoint` or acquired from the `useEntryPointLoader` hook.
+* `props`: additional runtime props that will be passed to the `Component`
+
+<DocsRating />

website-v2/versioned_docs/version-11.0.0/api-reference/entrypoint-apis/load-entrypoint.md

@@ -0,0 +1,72 @@
+---
+id: load-entrypoint
+title: loadEntryPoint
+slug: /api-reference/load-entrypoint/
+---
+
+import DocsRating from '../../../../src/core/DocsRating';
+import {OssOnly, FbInternalOnly} from 'internaldocs-fb-helpers';
+
+## `loadEntryPoint`
+
+This function is designed to be used with `EntryPointContainer` to implement the "render-as-you-fetch" pattern.
+
+EntryPoint references returned from `loadEntryPoint` will leak data to the Relay store (if they have associated queries) unless `.dispose()` is called on them once they are no longer referenced. As such, prefer using `useEntryPointLoader` when possible, which ensures that EntryPoint references are correctly disposed for you. See the [`useEntryPointLoader`](../use-entrypoint-loader) docs for a more complete example.
+
+<FbInternalOnly>
+
+For more information, see the [Loading EntryPoints](../../guides/entrypoints/using-entrypoints/#loading-entrypoints) guide.
+
+</FbInternalOnly>
+
+```js
+const EntryPoint = require('MyComponent.entrypoint.js');
+
+const {loadQuery} = require('react-relay');
+
+// Generally, your component should access the environment from the React context,
+// and pass that environment to this function.
+const getEntrypointReference = environment => loadEntryPoint(
+  { getEnvironment: () => environment },
+  EntryPoint,
+  {id: '4'},
+);
+
+// later: pass entryPointReference to EntryPointContainer
+// Note that EntryPoint references should have .dispose() called on them,
+// which is missing in this example.
+```
+
+### Arguments
+
+* `environmentProvider`: A provider for a Relay Environment instance on which to execute the request. If you're starting this request somewhere within a React component, you probably want to use the environment you obtain from using [`useRelayEnvironment`](../use-relay-environment/).
+* `EntryPoint`: EntryPoint to load.
+* `entryPointParams`: Parameters that will be passed to the EntryPoint's `getPreloadProps` method.
+
+### Flow Type Parameters
+
+* `TEntryPointParams`: Type parameter corresponding to the type of the first parameter of the `getPreloadProps` method of the EntryPoint.
+* `TPreloadedQueries`: the type of the `queries` parameter to the EntryPoint component.
+* `TPreloadedEntryPoints`: the type of the `entrypoints` parameter passed to the EntryPoint component.
+* `TRuntimeProps`: the type of the `props` prop passed to `EntryPointContainer`. This object is passed down to the EntryPoint component, also as `props`.
+* `TExtraProps`: if an EntryPoint's `getPreloadProps` method returns an object with an `extraProps` property, those extra props will be passed to the EntryPoint component as `extraProps`.
+* `TEntryPointComponent`: the type of the EntryPoint.
+* `TEntryPoint`: the type of the EntryPoint.
+
+### Return Value
+
+An EntryPoint reference with the following properties:
+
+* `dispose`: a method that will release any query references loaded by this EntryPoint (including indirectly, by way of other EntryPoints) from being retained by the store. This can cause the data referenced by these query reference to be garbage collected.
+
+The exact format of the return value is *unstable and highly likely to change*. We strongly recommend not using any other properties of the return value, as such code would be highly likely to break when upgrading to future versions of Relay. Instead, pass the result of `loadEntryPoint()` to `EntryPointContainer`.
+
+### Behavior
+
+* When `loadEntryPoint()` is called, each of an EntryPoint's associated queries (if it has any) will load their query data and query AST. Once both the query AST and the data are available, the data will be written to the store. This differs from the behavior of `prepareEntryPoint_DEPRECATED`, which would only write the data from an associated query to the store when that query was rendered with `usePreloadedQuery`.
+* The EntryPoint reference's associated query references will be retained by the Relay store, preventing it the data from being garbage collected. Once you call `.dispose()` on the EntryPoint reference, the data from the associated queries is liable to be garbage collected.
+* `loadEntryPoint` may throw an error if it is called during React's render phase.
+
+
+
+<DocsRating />

website-v2/versioned_docs/version-11.0.0/api-reference/entrypoint-apis/use-entrypoint-loader.md

@@ -0,0 +1,94 @@
+---
+id: use-entrypoint-loader
+title: useEntryPointLoader
+slug: /api-reference/use-entrypoint-loader/
+---
+
+import DocsRating from '../../../../src/core/DocsRating';
+import {OssOnly, FbInternalOnly} from 'internaldocs-fb-helpers';
+
+## `useEntryPointLoader`
+
+Hook used to make it easy to safely work with EntryPoints, while avoiding data leaking into the Relay store. It will keep an EntryPoint reference in state, and dispose of it when it is no longer accessible via state.
+
+<FbInternalOnly>
+
+For more information, see the [Loading EntryPoints](https://www.internalfb.com/intern/wiki/Relay/Guides/entry-points/#loading-entrypoints) guide.
+
+</FbInternalOnly>
+
+```js
+const {useEntryPointLoader, EntryPointContainer} = require('react-relay');
+
+const ComponentEntryPoint = require('Component.entrypoint');
+
+function EntryPointRevealer(): React.MixedElement {
+  const environmentProvider = useMyEnvironmentProvider();
+  const [
+    entryPointReference,
+    loadEntryPoint,
+    disposeEntryPoint,
+  ] = useEntryPointLoader(environmentProvider, ComponentEntryPoint);
+
+  return (
+    <>
+      {
+        entryPointReference == null && (
+          <Button onClick={() => loadEntryPoint({})}>
+            Click to reveal the contents of the EntryPoint
+          </Button>
+        )
+      }
+      {
+        entryPointReference != null && (
+          <>
+            <Button onClick={disposeEntryPoint}>
+              Click to hide and dispose the EntryPoint.
+            </Button>
+            <Suspense fallback="Loading...">
+              <EntryPointContainer
+                entryPointReference={entryPointReference}
+                props={{}}
+              />
+            </Suspense>
+          </>
+        )
+      }
+    </>
+  );
+}
+```
+
+### Arguments
+
+* `environmentProvider`: an object with a `getEnvironment` method that returns a relay environment.
+* `EntryPoint`: the EntryPoint, usually acquired by importing a `.entrypoint.js` file.
+
+### Flow Type Parameters
+
+* `TEntryPointParams`: the type of the first argument to the `getPreloadProps` method of the EntryPoint.
+* `TPreloadedQueries`: the type of the `queries` prop passed to the EntryPoint component.
+* `TPreloadedEntryPoints`: the type of the `entryPoints` prop passed to the EntryPoint component.
+* `TRuntimeProps`: the type of the `props` prop passed to `EntryPointContainer`. This object is passed down to the EntryPoint component, also as `props`.
+* `TExtraProps`: if an EntryPoint's `getPreloadProps` method returns an object with an `extraProps` property, those extra props will be passed to the EntryPoint component as `extraProps` and have type `TExtraProps`.
+* `TEntryPointComponent`: the type of the EntryPoint component.
+* `TEntryPoint`: the type of the EntryPoint.
+
+### Return value
+
+A tuple containing the following values:
+
+* `entryPointReference`: the EntryPoint reference, or `null`.
+* `loadEntryPoint`: a callback that, when executed, will load an EntryPoint, which will be accessible as `entryPointReference`. If a previous EntryPoint was loaded, it will dispose of it. It may throw an error if called during React's render phase.
+    * Parameters
+        * `params: TEntryPointParams`: the params passed to the EntryPoint's `getPreloadProps` method.
+* `disposeEntryPoint`: a callback that, when executed, will set `entryPointReference` to `null` and call `.dispose()` on it. It has type `() => void`. It should not be called during React's render phase.
+
+### Behavior
+
+* When the `loadEntryPoint` callback is called, each of an EntryPoint's associated queries (if it has any) will load their query data and query AST. Once both the query AST and the data are available, the data will be written to the store. This differs from the behavior of `prepareEntryPoint_DEPRECATED`, which would only write the data from an associated query to the store when that query was rendered with `usePreloadedQuery`.
+* The EntryPoint reference's associated query references will be retained by the Relay store, preventing it the data from being garbage collected. Once you call `.dispose()` on the EntryPoint reference, the data from the associated queries is liable to be garbage collected.
+* The `loadEntryPoint` callback may throw an error if it is called during React's render phase.
+
+
+<DocsRating />

website-v2/versioned_docs/version-11.0.0/api-reference/graphql/graphql-directives.md

@@ -0,0 +1,151 @@
+---
+id: graphql-directives
+title: GraphQL Directives
+slug: /api-reference/graphql-and-directives/
+---
+
+import DocsRating from '../../../../src/core/DocsRating';
+import {FbInternalOnly, OssOnly} from 'internaldocs-fb-helpers';
+
+Relay uses directives to add additional information to GraphQL documents, which are used by the [Relay compiler](../../guides/compiler/) to generate the appropriate runtime artifacts. These directives only appear in your application code and are removed from requests sent to your GraphQL server.
+
+**Note:** The Relay compiler will maintain any directives supported by your server (such as `@include` or `@skip`) so they remain part of the request to the GraphQL server and won't alter generated runtime artifacts.
+
+## `@arguments`
+
+`@arguments` is a directive used to pass arguments to a fragment that was defined using [`@argumentDefinitions`](#argumentdefinitions). For example:
+
+```graphql
+
+query TodoListQuery($userID: ID) {
+  ...TodoList_list @arguments(count: $count, userID: $userID) # Pass arguments here
+}
+
+```
+
+## `@argumentDefinitions`
+
+`@argumentDefinitions` is a directive used to specify arguments taken by a fragment. For example:
+
+```graphql
+
+fragment TodoList_list on TodoList @argumentDefinitions(
+  count: {type: "Int", defaultValue: 10},  # Optional argument
+  userID: {type: "ID"},                    # Required argument
+) {
+  title
+  todoItems(userID: $userID, first: $count) {  # Use fragment arguments here as variables
+    ...TodoItem_item
+  }
+}
+
+```
+
+## `@connection(key: String!, filters: [String])`
+
+With `usePaginationFragment`, Relay expects connection fields to be annotated with a `@connection` directive. For more detailed information and an example, check out the [docs on `usePaginationFragment`](../../guided-tour/list-data/rendering-connections).
+
+## `@relay(plural: Boolean)`
+
+When defining a fragment for use with a Fragment container, you can use the `@relay(plural: true)` directive to indicate that container expects the prop for that fragment to be a list of items instead of a single item. A query or parent that spreads a `@relay(plural: true)` fragment should do so within a plural field (ie a field backed by a [GraphQL list](http://graphql.org/learn/schema/#lists-and-non-null). For example:
+
+```javascript
+
+// Plural fragment definition
+graphql`
+  fragment TodoItems_items on TodoItem @relay(plural: true) {
+    id
+    text
+  }
+`;
+
+// Plural fragment usage: note the parent type is a list of items (`TodoItem[]`)
+fragment TodoApp_app on App {
+  items {
+    // parent type is a list here
+    ...TodoItem_items
+  }
+}
+
+```
+
+## `@inline`
+
+The hooks APIs that Relay exposes allow you to read data from the store only during the render phase. In order to read data from outside of the render phase (or from outside of React), Relay exposes the `@inline` directive. The data from a fragment annotated with `@inline` can be read using `readInlineData`.
+
+In the example below, the function `processItemData` is called from a React component. It requires an item object with a specific set of fields. All React components that use this function should spread the `processItemData_item` fragment to ensure all of the correct item data is loaded for this function.
+
+```javascript
+
+import {graphql, readInlineData} from 'react-relay';
+
+// non-React function called from React
+function processItemData(itemRef) {
+  const item = readInlineData(graphql`
+    fragment processItemData_item on Item @inline {
+      title
+      price
+      creator {
+        name
+      }
+    }
+  `, itemRef);
+  sendToThirdPartyApi({
+    title: item.title,
+    price: item.price,
+    creatorName: item.creator.name
+  });
+}
+
+```
+
+```javascript
+
+export default function MyComponent({item}) {
+  function handleClick() {
+    processItemData(item);
+  }
+
+  const data = useFragment(
+    graphql`
+      fragment MyComponent_item on Item {
+        ...processItemData_item
+        title
+      }
+    `,
+    item
+  );
+
+  return (
+    <button onClick={handleClick}>Process {item.title}</button>
+  );
+}
+
+```
+
+## `@relay(mask: Boolean)`
+
+ It is not recommended to use `@relay(mask: false)`. Please instead consider using the `@inline` fragment.
+
+`@relay(mask: false)` can be used to prevent data masking; when including a fragment and annotating it with `@relay(mask: false)`, its data will be available directly to the parent instead of being masked for a different container.
+
+Applied to a fragment definition, `@relay(mask: false)` changes the generated Flow types to be better usable when the fragment is included with the same directive. The Flow types will no longer be exact objects and no longer contain internal marker fields.
+
+This may be helpful to reduce redundant fragments when dealing with nested or recursive data within a single Component.
+
+Keep in mind that it is typically considered an **anti-pattern** to create a single fragment shared across many containers. Abusing this directive could result in over-fetching in your application.
+
+In the example below, the `user` prop will include the data for `id` and `name` fields wherever `...Component_internUser` is included, instead of Relay's normal behavior to mask those fields:
+
+```javascript
+
+graphql`
+  fragment Component_internUser on InternUser @relay(mask: false) {
+    id
+    name
+  }
+`;
+
+```
+
+<DocsRating />