Skip to content

Commit

Permalink
update doc references to renamed props
Browse files Browse the repository at this point in the history 
Summary:
Minor update to the names of the keys in the generated types to reflect recent
updates with Relay 13.

Reviewed By: alunyov

Differential Revision: D33355079

fbshipit-source-id: fe811051422e4a04ad0b8ef70d1e2d30772e028f
  • Loading branch information
@kassens @facebook-github-bot
kassens authored and facebook-github-bot committed Dec 30, 2021
1 parent e959f5c commit e0911d6
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 70 deletions.
2 changes: 1 addition & 1 deletion website/docs/guided-tour/list-data/refetching-connections.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ If we want to refetch the connection with *different* variables, we can use the
/**
* FriendsListComponent.react.js
*/
import type {FriendsListComponent_user$ref} from 'FriendsListComponent_user.graphql';
import type {FriendsListComponent_user$key} from 'FriendsListComponent_user.graphql';

const React = require('React');
const {useState, useEffect} = require('React');
Expand Down
119 changes: 50 additions & 69 deletions website/docs/guides/type-emission.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import TabItem from '@theme/TabItem';

As part of its normal work, the [**Relay Compiler**](../compiler) will emit type information for your language of choice that helps you write type-safe application code. These types are included in the artifacts that `relay-compiler` generates to describe your operations and fragments.

## Operation input data
## Operation variables

The shape of the variables object used for query, mutation, or subscription operations.

Expand All @@ -30,31 +30,29 @@ In this example the emitted type-information would require the variables object

```javascript
/**
* export type ExampleQueryVariables = {
* export type ExampleQuery$variables = {
* +artistID: string,
* }
* export type ExampleQueryResponse = {
* export type ExampleQuery$data = {
* +artist: {
* +name: ?string,
* }
* }
* export type ExampleQuery = {
* +variables: ExampleQueryVariables,
* +response: ExampleQueryResponse,
* +variables: ExampleQuery$variables,
* +response: ExampleQuery$data,
* }
*/

import type { ExampleQuery } from "__generated__/ExampleQuery.graphql"

const data = useLazyLoadQuery<ExampleQuery>(
const data = useLazyLoadQuery(
graphql`
query ExampleQuery($artistID: ID!) {
artist(id: $artistID) {
name
}
}
`,
// variables are expected to be of type ExampleQueryVariables
// variables are expected to be of type ExampleQuery$variables
{artistID: 'banksy'},
);
```
Expand All @@ -65,17 +63,17 @@ const data = useLazyLoadQuery<ExampleQuery>(

```javascript
/**
* export type ExampleQueryVariables = {
* export type ExampleQuery$variables = {
* readonly artistID: string
* }
* export type ExampleQueryResponse = {
* export type ExampleQuery$data = {
* readonly artist?: {
* readonly name?: string
* }
* }
* export type ExampleQuery = {
* readonly variables: ExampleQueryVariables
* readonly response: ExampleQueryResponse
* readonly variables: ExampleQuery$variables
* readonly response: ExampleQuery$data
* }
*/

Expand All @@ -89,15 +87,15 @@ const data = useLazyLoadQuery<ExampleQuery>(
}
}
`,
// variables are expected to be of type ExampleQueryVariables
// variables are expected to be of type ExampleQuery$variables
{artistID: 'banksy'},
);
```

</TabItem>
</Tabs>

## Operation/Fragment selection-set data
## Operation and fragment data

The shape of the data selected in a operation or fragment, following the [data-masking] rules. That is, excluding any data selected by fragment spreads.

Expand All @@ -113,24 +111,22 @@ In this example the emitted type-information describes the response data which i

```javascript
/**
* export type ExampleQueryVariables = {
* export type ExampleQuery$variables = {
* +artistID: string,
* }
* export type ExampleQueryResponse = {
* export type ExampleQuery$data = {
* +artist: {
* +name: ?string,
* }
* }
* export type ExampleQuery = {
* +variables: ExampleQueryVariables,
* +response: ExampleQueryResponse,
* +variables: ExampleQuery$variables,
* +response: ExampleQuery$data,
* }
*/

import type { ExampleQuery } from "__generated__/ExampleQuery.graphql"

// data is of type ExampleQueryResponse
const data = useLazyLoadQuery<ExampleQuery>(
// data is of type ExampleQuery$data
const data = useLazyLoadQuery(
graphql`
query ExampleQuery($artistID: ID!) {
artist(id: $artistID) {
Expand All @@ -150,23 +146,23 @@ return props.artist && <div>{props.artist.name} is great!</div>

```javascript
/**
* export type ExampleQueryVariables = {
* export type ExampleQuery$variables = {
* readonly artistID: string
* }
* export type ExampleQueryResponse = {
* export type ExampleQuery$data = {
* readonly artist?: {
* readonly name?: string
* }
* }
* export type ExampleQuery = {
* readonly variables: ExampleQueryVariables
* readonly response: ExampleQueryResponse
* readonly variables: ExampleQuery$variables
* readonly response: ExampleQuery$data
* }
*/

import { ExampleQuery } from "__generated__/ExampleQuery.graphql"

// data is of type ExampleQueryResponse
// data is of type ExampleQuery$data
const data = useLazyLoadQuery<ExampleQuery>(
graphql`
query ExampleQuery($artistID: ID!) {
Expand All @@ -185,8 +181,7 @@ return props.artist && <div>{props.artist.name} is great!</div>
</Tabs>


Similarly, in this example the emitted type-information describes the type of the prop to match the type of the fragment reference `useFragment` expects to receive.

Similarly, in this example the emitted type-information describes the type of the prop to match the type of the fragment reference `useFragment` expects to receive.

<Tabs
defaultValue={fbContent({internal: 'Flow', external: 'TypeScript'})}
Expand Down Expand Up @@ -286,50 +281,42 @@ Consider a component that [composes](../../guided-tour/rendering/fragments/#comp
<TabItem value="Flow">

```javascript
/**
* import type { FragmentReference } from "relay-runtime";
* declare export opaque type ExampleFragmentComponent_artist$ref: FragmentReference;
*
* export type ExampleFragmentComponent_artist$data = {
* +name: string,
* +$refType: ExampleFragmentComponent_artist$ref,
* };
*/

import { ExampleFragmentComponent } from "./ExampleFragmentComponent"

/**
* import type { ExampleFragmentComponent_artist$ref } from "ExampleFragmentComponent_artist.graphql";
* import type { ExampleFragmentComponent_artist$fragmentType } from "ExampleFragmentComponent_artist.graphql";
*
* export type ExampleQueryResponse = {
* export type ExampleQuery$data = {
* +artist: ?{
* +$fragmentRefs: ExampleFragmentComponent_artist$ref,
* +name: ?string,
* +$fragmentSpreads: ExampleFragmentComponent_artist$fragmentType,
* }
* };
* export type ExampleQueryVariables = {
* export type ExampleQuery$variables = {
* +artistID: string,
* }
* export type ExampleQuery = {
* +variables: ExampleQueryVariables,
* +response: ExampleQueryResponse,
* +variables: ExampleQuery$variables,
* +response: ExampleQuery$data,
* }
*/
import type { ExampleQuery } from "__generated__/ExampleQuery.graphql"

// data is of type ExampleQueryResponse
const data = useLazyLoadQuery<ExampleQuery>(
// data is of type ExampleQuery$data
const data = useLazyLoadQuery(
graphql`
query ExampleQuery($artistID: ID!) {
artist(id: $artistID) {
name
...ExampleFragmentComponent_artist
}
}
`,
{artistID: 'banksy'},
);

// Here only `data.artist` is an object typed as the appropriate type
// for the `artist` prop of `ExampleFragmentComponent`.
// Here only `data.artist.name` is directly visible,
// the marker prop $fragmentSpreads indicates that `data.artist`
// can be used for the component expecting this fragment spread.
return <ExampleFragmentComponent artist={data.artist} />;
```

Expand All @@ -338,49 +325,43 @@ return <ExampleFragmentComponent artist={data.artist} />;
<TabItem value="TypeScript">

```javascript
/**
* declare const _ExampleFragmentComponent_artist$ref: unique symbol;
* export type ExampleFragmentComponent_artist$ref = typeof _ExampleFragmentComponent_artist$ref;
*
* export type ExampleFragmentComponent_artist = {
* readonly name: string
* readonly " $refType": ExampleFragmentComponent_artist$ref
* }
*/
import { ExampleFragmentComponent } from "./ExampleFragmentComponent"

/**
* import { ExampleFragmentComponent_artist$ref } from "ExampleFragmentComponent_artist.graphql";
* import { ExampleFragmentComponent_artist$fragmentType } from "ExampleFragmentComponent_artist.graphql";
*
* export type ExampleQueryResponse = {
* export type ExampleQuery$data = {
* readonly artist?: {
* readonly " $fragmentRefs": ExampleFragmentComponent_artist$ref
* readonly name: ?string,
* readonly " $fragmentSpreads": ExampleFragmentComponent_artist$fragmentType
* }
* }
* export type ExampleQueryVariables = {
* export type ExampleQuery$variables = {
* readonly artistID: string
* }
* export type ExampleQuery = {
* readonly variables: ExampleQueryVariables
* readonly response: ExampleQueryResponse
* readonly variables: ExampleQuery$variables
* readonly response: ExampleQuery$data
* }
*/
import { ExampleQuery } from "__generated__/ExampleQuery.graphql"

// data is of type ExampleQueryResponse
// data is of type ExampleQuery$data
const data = useLazyLoadQuery<ExampleQuery>(
graphql`
query ExampleQuery($artistID: ID!) {
artist(id: $artistID) {
name
...ExampleFragmentComponent_artist
}
}
`,
{artistID: 'banksy'},
);

// Here only `data.artist` is an object typed as the appropriate type
// for the `artist` prop of `ExampleFragmentComponent`.
// Here only `data.artist.name` is directly visible,
// the marker prop $fragmentSpreads indicates that `data.artist`
// can be used for the component expecting this fragment spread.
return <ExampleFragmentComponent artist={data.artist} />;
```

Expand Down

0 comments on commit e0911d6

Please sign in to comment.