{"bugs":{"url":"https://github.com/apollographql/react-apollo/issues"},"dist":{"shasum":"caca0faf2183272c86ccf52969b5ff459b280b41","tarball":"https://registry.npmjs.org/@apollo/react-hooks/-/react-hooks-0.1.0-beta.12.tgz","fileCount":52,"integrity":"sha512-GQOm88syJ/i+cYNskjlmX2fXgHwA8kqM76tkGhFtlYk+IHMkyjm6iyxuih1jjw76Q6ERUwVKiX86KwW/Gw4giA==","signatures":[{"sig":"MEUCIDoNo1BC89QqFgRGeKg9W+UhxoZy5AE73QsFb/am9OJXAiEAhRxLqkBNmZjPFRdThjnIUO+Pk8YeNG5GLv8PPbkmAVM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":355044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSIolCRA9TVsSAnZWagAABH0P/jcjsUZ8G3z23i3NPnlS\nwC5OGbojhB/QgzNHLCibq6Vz8nfUYeEdWCosZoDu+PHEnF5e3JzGrR9A/AX7\nInB4srb1ivRDPsKpUtTCTQLlfTeUFWx/2srkc1RorPgrhEiL7AXysf4TvXZu\nqHXyMb8blEiIbYyxb6siqnOvzO/yOZACqdgQoou4tUhNAnc3nXKRzRP/uzug\nNSjBep0/0/KtFHh3rZTUYqGHWSoz2/uO0C37eaLIw+MmPEx+MPSDWJk4wGJ6\nzE8o/i9va6njYv7G8PREK3tACJj3BPZhtB/5nlvWbNIeQHNT+vMwRuzMuMhT\nS6OIgt+m4Xb7QTXsea6G9gpq7gdwNKmhrcTBJwyKiQHdSNSsP8bHT/H/3tew\nr6VKIZMDyQSYKxBmDxdneEdktypQWk2mWd5rzWgIDaduEJB5hv2iByYBEy7Q\nF7nDFRQv1RCY3QNlYtKTuRgDumbOFlzPAWOOr2zrfNsfbP1TJfBf6JGmlXLQ\nkR0IiBMCG6rmOwwBKin9R8lqVvxqcQBJK1Z/DlxVinqduBcKSDQZDXVGt92M\nU73eJdgilR53V/T8vbHi1XMxVqpAZ2Xe5GeAxGpaGKvqAPWYwBv1UlN8ybh4\nyPlMImF7oekv4QTK8OZHl+Dal9nB2uAd17sCFJoynhUywkT40/QORCQc3EXn\nfffl\r\n=I56/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./lib/react-hooks.cjs.js","name":"@apollo/react-hooks","author":{"name":"opensource@apollographql.com"},"module":"./lib/react-hooks.esm.js","readme":"# <a href=\"https://www.apollographql.com/\"><img src=\"https://user-images.githubusercontent.com/841294/53402609-b97a2180-39ba-11e9-8100-812bab86357c.png\" height=\"100\" alt=\"React Apollo\"></a>\n\n## React Apollo - Hooks\n\n[![npm version](https://badge.fury.io/js/%40apollo%2Freact-hooks.svg)](https://badge.fury.io/js/%40apollo%2Freact-hooks)\n[![Build Status](https://circleci.com/gh/apollographql/react-apollo.svg?style=svg)](https://circleci.com/gh/apollographql/react-apollo)\n[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/apollo)\n\nReact Apollo [Hooks](https://reactjs.org/docs/hooks-intro.html).\n\n> **NOTE:** Full React Apollo Hooks usage documentation is coming soon, and when ready will be made available in the main [React Apollo documentation](https://www.apollographql.com/docs/react/). The contents of this README are intended to help beta testers, and will change.\n\n### Contents\n\n1. [Installation](#installation)\n2. [Hooks Overview](#hooks-overview)\n\n- [`useQuery`](#useQuery)\n- [`useMutation`](#useMutation)\n- [`useSubscription`](#useSubscription)\n- [`useApolloClient`](#useApolloClient)\n\n3. [Reference]()\n\n### Installation\n\n```\nnpm install @apollo/react-hooks\n```\n\n### Hooks Overview\n\n<a name=\"useQuery\"></a>\n\n#### a) [`useQuery`](https://github.com/apollographql/react-apollo/blob/release-3.0.0/packages/hooks/src/useQuery.ts)\n\n**Function:**\n\n```ts\nexport function useQuery<TData = any, TVariables = OperationVariables>(\n  query: DocumentNode,\n  options?: QueryHookOptions<TData, TVariables>\n): QueryResult<TData, TVariables>;\n```\n\n**Options:**\n\n```ts\nquery?: DocumentNode;\ndisplayName?: string;\nskip?: boolean;\nonCompleted?: (data: TData) => void;\nonError?: (error: ApolloError) => void;\nssr?: boolean;\nvariables?: TVariables;\nfetchPolicy?: WatchQueryFetchPolicy;\nerrorPolicy?: ErrorPolicy;\npollInterval?: number;\nclient?: ApolloClient<any>;\nnotifyOnNetworkStatusChange?: boolean;\ncontext?: Context;\npartialRefetch?: boolean;\nreturnPartialData?: boolean\n```\n\n**Result:**\n\n- client: ApolloClient<any>;\n- data: TData | undefined;\n- error?: ApolloError;\n- loading: boolean;\n- networkStatus: NetworkStatus;\n- fetchMore: any;\n\n**Example (from the [Hooks demo app](https://github.com/apollographql/react-apollo/tree/release-3.0.0/examples/hooks)):**\n\n```jsx\nconst GET_ROCKET_INVENTORY = gql`\n  query getRocketInventory {\n    rocketInventory {\n      id\n      model\n      year\n      stock\n    }\n  }\n`;\n\nexport function RocketInventoryList() {\n  const { loading, data } = useQuery(GET_ROCKET_INVENTORY);\n  return (\n    <Row className=\"rocket-inventory-list mt-4\">\n      <Col sm=\"12\">\n        <h3>Available Inventory</h3>\n        {loading ? (\n          <p>Loading ...</p>\n        ) : (\n          <table className=\"table table-striped table-bordered\">\n            <thead>\n              <tr>\n                <th>Model</th>\n                <th>Year</th>\n                <th>Stock</th>\n              </tr>\n            </thead>\n            <tbody>\n              {data.rocketInventory.map((inventory: RocketInventory) => (\n                <tr\n                  key={`${inventory.model}-${inventory.year}-${\n                    inventory.stock\n                  }`}\n                >\n                  <td>{inventory.model}</td>\n                  <td>{inventory.year}</td>\n                  <td>{inventory.stock}</td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        )}\n      </Col>\n    </Row>\n  );\n}\n```\n\n<a name=\"useMutation\"></a>\n\n#### b) [`useMutation`](https://github.com/apollographql/react-apollo/blob/release-3.0.0/packages/hooks/src/useMutation.ts)\n\n**Function:**\n\n```ts\nexport function useMutation<TData = any, TVariables = OperationVariables>(\n  mutation: DocumentNode,\n  options?: MutationHookOptions<TData, TVariables>\n): MutationTuple<TData, TVariables>;\n```\n\n**Options:**\n\n```ts\nmutation?: DocumentNode;\nvariables?: TVariables;\noptimisticResponse?: TData | ((vars: TVariables) => TData);\nrefetchQueries?: Array<string | PureQueryOptions> | RefetchQueriesFunction;\nawaitRefetchQueries?: boolean;\nerrorPolicy?: ErrorPolicy;\nupdate?: MutationUpdaterFn<TData>;\nclient?: ApolloClient<object>;\nnotifyOnNetworkStatusChange?: boolean;\ncontext?: Context;\nonCompleted?: (data: TData) => void;\nonError?: (error: ApolloError) => void;\nfetchPolicy?: WatchQueryFetchPolicy;\nignoreResults?: boolean;\n```\n\n**Result:**\n\n```ts\n[\n  (\n    options?: MutationFunctionOptions<TData, TVariables>\n  ) => Promise<void | ExecutionResult<TData>>,\n  {\n    data?: TData;\n    error?: ApolloError;\n    loading: boolean;\n    called: boolean;\n    client?: ApolloClient<object>\n  }\n];\n```\n\n**Example (from the [Hooks demo app](https://github.com/apollographql/react-apollo/tree/release-3.0.0/examples/hooks)):**\n\n```jsx\nconst SAVE_ROCKET = gql`\n  mutation saveRocket($rocket: RocketInput!) {\n    saveRocket(rocket: $rocket) {\n      model\n    }\n  }\n`;\n\nexport function NewRocketForm() {\n  const [model, setModel] = useState('');\n  const [year, setYear] = useState(0);\n  const [stock, setStock] = useState(0);\n\n  const [saveRocket, { error, data }] = useMutation<\n    {\n      saveRocket: RocketInventory;\n    },\n    { rocket: NewRocketDetails }\n  >(SAVE_ROCKET, {\n    variables: { rocket: { model: model, year: +year, stock: +stock } },\n    refetchQueries: ['getRocketInventory']\n  });\n\n  return (\n    <div className=\"new-rocket-form mt-3\">\n      <h3>Add a Rocket</h3>\n      {error ? <Alert color=\"danger\">Oh no! {error.message}</Alert> : null}\n      {data && data.saveRocket ? (\n        <Alert color=\"success\">\n          Model <strong>{data.saveRocket.model}</strong> added!\n        </Alert>\n      ) : null}\n      <Form style={{ border: '1px solid #ddd', padding: '15px' }}>\n        <Row>\n          <Col sm=\"6\">\n            <FormGroup>\n              <Label for=\"model\">Model</Label>\n              <Input\n                type=\"text\"\n                name=\"model\"\n                id=\"model\"\n                onChange={e => setModel(e.target.value)}\n              />\n            </FormGroup>\n          </Col>\n          <Col sm=\"3\">\n            <FormGroup>\n              <Label for=\"year\">Year</Label>\n              <Input\n                type=\"number\"\n                name=\"year\"\n                id=\"year\"\n                onChange={e => setYear(+e.target.value)}\n              />\n            </FormGroup>\n          </Col>\n          <Col sm=\"3\">\n            <FormGroup>\n              <Label for=\"stock\">Stock</Label>\n              <Input\n                type=\"number\"\n                name=\"stock\"\n                id=\"stock\"\n                onChange={e => setStock(+e.target.value)}\n              />\n            </FormGroup>\n          </Col>\n        </Row>\n        <Row>\n          <Col\n            sm=\"12\"\n            className=\"text-right\"\n            onClick={e => {\n              e.preventDefault();\n              if (model && year && stock) {\n                saveRocket();\n              }\n            }}\n          >\n            <Button>Add</Button>\n          </Col>\n        </Row>\n      </Form>\n    </div>\n  );\n}\n```\n\n<a name=\"useSubscription\"></a>\n\n#### c) [`useSubscription`](https://github.com/apollographql/react-apollo/blob/release-3.0.0/packages/hooks/src/useSubscription.ts)\n\n**Function:**\n\n```ts\nexport function useSubscription<TData = any, TVariables = OperationVariables>(\n  subscription: DocumentNode,\n  options?: SubscriptionHookOptions<TData, TVariables>\n);\n```\n\n**Options:**\n\n```ts\nsubscription?: DocumentNode;\nvariables?: TVariables;\nfetchPolicy?: FetchPolicy;\nshouldResubscribe?: boolean | ((options: BaseSubscriptionOptions<TData, TVariables>) => boolean);\nclient?: ApolloClient<object>;\nonSubscriptionData?: (options: OnSubscriptionDataOptions<TData>) => any;\nonSubscriptionComplete?: () => void;\n```\n\n**Example (from the [Hooks demo app](https://github.com/apollographql/react-apollo/tree/release-3.0.0/examples/hooks)):**\n\n```jsx\nconst LATEST_NEWS = gql`\n  subscription getLatestNews {\n    latestNews {\n      content\n    }\n  }\n`;\n\nexport function LatestNews() {\n  const { loading, data } = useSubscription<News>(LATEST_NEWS);\n  return (\n    <Card className=\"bg-light\">\n      <CardBody>\n        <CardTitle>\n          <h5>Latest News</h5>\n        </CardTitle>\n        <CardText>{loading ? 'Loading...' : data!.latestNews.content}</CardText>\n      </CardBody>\n    </Card>\n  );\n}\n```\n\n<a name=\"useApolloClient\"></a>\n\n#### d) [`useApolloClient`](https://github.com/apollographql/react-apollo/blob/release-3.0.0/packages/hooks/src/useApolloClient.ts)\n\n**Function:**\n\n```ts\nexport function useApolloClient(): ApolloClient<object>;\n```\n\n**Result:**\n\n`ApolloClient` instance stored in the current Context.\n\n**Example:**\n\n```jsx\nconst client = useApolloClient();\nconsol.log('AC instance stored in the Context', client);\n```\n\n### Reference\n\n- Main [Apollo Client / React Apollo documentation](https://www.apollographql.com/docs/react/)\n- `useQuery`, `useMutation` and `useSubscription` [Hooks demo app](https://github.com/apollographql/react-apollo/tree/release-3.0.0/examples/hooks)\n- Need help? Join us in the [Apollo Spectrum community](https://spectrum.chat/apollo)\n","gitHead":"38567ea3c2ecb49f4c6937a1a1fb3caf32f3a5a0","license":"MIT","scripts":{"test":"npx jest --config ../../config/jest.config.js --testPathPattern packages/hooks","build":"npx tsc -p ./config","clean":"rm -Rf ./lib/* ./meta/bundlesize/* ./meta/coverage/* ./.rpt2_cache","watch":"npx tsc-watch --onSuccess \"npm run postbuild\" -p ./config","deploy":"npm publish --tag beta","prepare":"npm run build","prebuild":"npm run clean","test:cjs":"npm run build && npx jest --config ../../config/jest.cjs.config.js --testPathPattern packages/hooks","test:umd":"npm run build && npx jest --config ../../config/jest.umd.config.js --testPathPattern packages/hooks","postbuild":"npx rollup -c ./config/rollup.config.js","predeploy":"npm run build","test:watch":"npx jest --config ../../config/jest.config.js --testPathPattern packages/hooks --watch"},"typings":"./lib/index.d.ts","_npmUser":{"name":"apollo-bot","email":"npm@apollographql.com"},"homepage":"https://github.com/apollographql/react-apollo#readme","keywords":["apollo","graphql","react","hooks"],"repository":{"url":"git+https://github.com/apollographql/react-apollo.git","type":"git"},"_npmVersion":"lerna/3.16.4/node@v10.15.3+x64 (darwin)","description":"React Apollo Hooks.","directories":{},"maintainers":[{"name":"apollo-bot","email":"npm@apollographql.com"}],"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.10.0","ts-invariant":"^0.4.4","@wry/equality":"^0.1.9","@apollo/react-common":"^0.1.0-beta.10"},"react-native":{"react-dom/server":false},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"24.8.0","rollup":"1.18.0","tsc-watch":"2.2.1","typescript":"3.5.3"},"peerDependencies":{"react":"^16.8.0","graphql":"^14.3.1","react-dom":"^16.8.0","apollo-client":"^2.6.3"},"_npmOperationalInternal":{"tmp":"tmp/react-hooks_0.1.0-beta.12_1565035044959_0.5781153126940088","host":"s3://npm-registry-packages"},"_id":"@apollo/react-hooks@0.1.0-beta.12","version":"0.1.0-beta.12"}