React Apollo - Hooks
React Apollo Hooks.
NOTE: Full React Apollo Hooks usage documentation is coming soon, and when ready will be made available in the main React Apollo documentation. The contents of this README are intended to help beta testers, and will change.
Contents
Installation
npm install @apollo/react-hooks
Hooks Overview
useQuery
a) Function:
;
Options:
query?: DocumentNode;displayName?: string;skip?: boolean;onCompleted?:void;onError?:void;ssr?: boolean;variables?: TVariables;fetchPolicy?: WatchQueryFetchPolicy;errorPolicy?: ErrorPolicy;pollInterval?: number;client?: ApolloClient<any>;notifyOnNetworkStatusChange?: boolean;context?: Context;partialRefetch?: boolean;returnPartialData?: boolean
Result:
- client: ApolloClient;
- data: TData | undefined;
- error?: ApolloError;
- loading: boolean;
- networkStatus: NetworkStatus;
- fetchMore: any;
Example (from the Hooks demo app):
const GET_ROCKET_INVENTORY = gql` query getRocketInventory { rocketInventory { id model year stock } }`; { const loading data = ; return <Row ="rocket-inventory-list mt-4"> <Col ="12"> <h3>Available Inventory</h3> loading ? <p>Loading ...</p> : <table ="table table-striped table-bordered"> <thead> <tr> <th>Model</th> <th>Year</th> <th>Stock</th> </tr> </thead> <tbody> datarocketInventory </tbody> </table> </Col> </Row> ;}
useMutation
b) Function:
;
Options:
mutation?: DocumentNode;variables?: TVariables;optimisticResponse?: TData | TData;refetchQueries?: Array<string | PureQueryOptions> | RefetchQueriesFunction;awaitRefetchQueries?: boolean;errorPolicy?: ErrorPolicy;update?: MutationUpdaterFn<TData>;client?: ApolloClient<object>;notifyOnNetworkStatusChange?: boolean;context?: Context;onCompleted?:void;onError?:void;fetchPolicy?: WatchQueryFetchPolicy;ignoreResults?: boolean;
Result:
;
Example (from the Hooks demo app):
const SAVE_ROCKET = gql` mutation saveRocket($rocket: RocketInput!) { saveRocket(rocket: $rocket) { model } }`; { const model setModel = ; const year setYear = ; const stock setStock = ; const saveRocket error data = useMutation< saveRocket: RocketInventory; rocket: NewRocketDetails >SAVE_ROCKET variables: rocket: model: model year: +year stock: +stock refetchQueries: 'getRocketInventory' ; return <div ="new-rocket-form mt-3"> <h3>Add a Rocket</h3> error ? <Alert ="danger">Oh no! errormessage</Alert> : null data && datasaveRocket ? <Alert ="success"> Model <strong>datasaveRocketmodel</strong> added! </Alert> : null <Form => <Row> <Col ="6"> <FormGroup> <Label ="model">Model</Label> <Input ="text" ="model" ="model" = /> </FormGroup> </Col> <Col ="3"> <FormGroup> <Label ="year">Year</Label> <Input ="number" ="year" ="year" = /> </FormGroup> </Col> <Col ="3"> <FormGroup> <Label ="stock">Stock</Label> <Input ="number" ="stock" ="stock" = /> </FormGroup> </Col> </Row> <Row> <Col ="12" ="text-right" = > <Button>Add</Button> </Col> </Row> </Form> </div> ;}
useSubscription
c) Function:
;
Options:
subscription?: DocumentNode;variables?: TVariables;fetchPolicy?: FetchPolicy;shouldResubscribe?: boolean | boolean;client?: ApolloClient<object>;onSubscriptionData?:any;onSubscriptionComplete?:void;
Example (from the Hooks demo app):
const LATEST_NEWS = gql` subscription getLatestNews { latestNews { content } }`; { const loading data = useSubscription<News>LATEST_NEWS; return <Card ="bg-light"> <CardBody> <CardTitle> <h5>Latest News</h5> </CardTitle> <CardText>loading ? 'Loading...' : data!latestNewscontent</CardText> </CardBody> </Card> ;}
useApolloClient
d) Function:
;
Result:
ApolloClient
instance stored in the current Context.
Example:
const client = ;consol;
Reference
- Main Apollo Client / React Apollo documentation
useQuery
,useMutation
anduseSubscription
Hooks demo app- Need help? Join us in the Apollo Spectrum community