{"_id":"@andrewray/next-apollo","_rev":"1-95919aaf7e19bda0c8d46b872e6dcb52","name":"@andrewray/next-apollo","dist-tags":{"latest":"2.1.0"},"versions":{"2.1.0":{"name":"@andrewray/next-apollo","version":"2.1.0","description":"React higher-order component for using the Apollo GraphQL client inside Next.js","main":"./dist/index.js","scripts":{"build":"babel src --out-dir dist","prepublish":"npm run build","precommit":"lint-staged"},"lint-staged":{"*.{js,json}":["prettier --write --no-semi --single-quote --jsx-bracket-same-line","git add"]},"repository":{"type":"git","url":"git+https://github.com/ads1018/next-apollo.git"},"keywords":["nextjs","graphql","apollo","reactjs"],"author":{"name":"Adam Soffer"},"license":"MIT","bugs":{"url":"https://github.com/ads1018/next-apollo/issues"},"homepage":"https://github.com/ads1018/next-apollo#readme","peerDependencies":{"graphql":"0","next":"8","prop-types":"15","react-apollo":"2","react-dom":"16","react":"16","isomorphic-fetch":"2"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.3","@babel/preset-react":"^7.0.0","@babel/runtime":"^7.3.1","husky":"0.14.3","lint-staged":"4.3.0","prettier":"1.15.3"},"dependencies":{"apollo-client-preset":"1.0.8","lodash.isfunction":"3.0.9","prop-types-exact":"1.2.0","url":"0.11.0"},"gitHead":"645d15998b558350bc3e9e3731ec24793c7f4d10","_id":"@andrewray/next-apollo@2.1.0","_npmVersion":"6.4.1","_nodeVersion":"10.10.0","_npmUser":{"name":"andrewray","email":"me@andrewray.me"},"dist":{"integrity":"sha512-FmTffUb2HXKNymsn2rqrUTkr11zxF4g2ZAHDAExnpLHq4/xGhKofonj8C8nlYU1hJm4/d3Vohez/bPV5B9pl7w==","shasum":"7218ee54a0c6b2d5e9a96691b438d235aef9126f","tarball":"https://registry.npmjs.org/@andrewray/next-apollo/-/next-apollo-2.1.0.tgz","fileCount":7,"unpackedSize":22162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcl9nzCRA9TVsSAnZWagAA+0sP/1Z260m87QcKQyU096CE\nVjSq8lfjfewHrowjlAwvDQxGr++uNVADeH0PHMRmDUJcJUmynBosbGDnPs+u\npPfAfECEgCd3YY7v9MlNpIGyG8aHQDMLr7MtM78muhe5a+WEf1fp591E95N1\npyhdC7GPh7PB44UAC5B+qlTIWZQWFyx3gSMt/xzzjP5/ShvFyYALqEs65C4H\nXlX6KG3hbd21oY8FvD6KYJJEH8s5z8i14lkuA9FnZ9UwUncDiCxOpAr1p4iX\nVVu2Brv3secTwYTGp4UZR9aP3kCPKZSiZzR0BCpxgyXOyFjfrlJCakqte7JE\n1FIrYg9eos1mj4rXZt7o9CRkeYPkZ3Q+VdQofPJen8GIaEs1PVSRXiZBkHz3\nS0u68FaCp3cwnnM3hCjc64raOXEqlb49LzVFDPoUs56mYoMbpUxDc5mKGX/M\nMfBk0A2zmQtiNhuZA4YvT3Z1i0rlXQ48Yois7BejW6N4YMwrycqC9jcDvLI2\nyFpximV1GJzvRxwX29Fa/X+F9OrfNeVX5wNEIwqcpck8M0SS6cq2YxoPEq+Z\n2h9X/gAaayzvoOfe+njRpnAdfW/di5K6s6kDISnnyCp4zfQULIRfUolmpVzw\nv9jneMn4FnU8ZBNzoYfrBP0+yyy8H/51snQv4J6BAtpmxFzIb+mIBU8dUqPM\n14+Y\r\n=Q5LW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYc4Lwsy5tgEam8NXsPn4i1sY123jIAF5wZvR1btHJsAIhAI1vp3vjkoQ+r1zSuHsA/9uwWsZCGQmpESJ3LBUot756"}]},"maintainers":[{"name":"andrewray","email":"me@andrewray.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-apollo_2.1.0_1553455603262_0.41473344458595585"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-24T19:26:43.071Z","2.1.0":"2019-03-24T19:26:43.385Z","modified":"2022-04-04T14:01:49.849Z"},"maintainers":[{"name":"andrewray","email":"me@andrewray.me"}],"description":"React higher-order component for using the Apollo GraphQL client inside Next.js","homepage":"https://github.com/ads1018/next-apollo#readme","keywords":["nextjs","graphql","apollo","reactjs"],"repository":{"type":"git","url":"git+https://github.com/ads1018/next-apollo.git"},"author":{"name":"Adam Soffer"},"bugs":{"url":"https://github.com/ads1018/next-apollo/issues"},"license":"MIT","readme":"# Next Apollo [![Build Status](https://travis-ci.org/adamsoffer/next-apollo.svg?branch=master)](https://travis-ci.org/adamsoffer/next-apollo)\n\nA package for using Apollo within a Next.js application.\n\nNote:\nThis package is ideal if you want to tuck away all the ceremony involved when using Apollo in a Next.js app. It's also ideal if you prefer to use Apollo explicitly on a _page-by-page_ basis, as it requires you to wrap each page that uses Apollo in a HOC. If you prefer to use Apollo implicitly on every page, I recommend taking a look at the [`with-apollo` example](https://github.com/zeit/next.js/tree/canary/examples/with-apollo) in the next.js repo.\n\n## Installation\n\nNote this project assumes you have React, react-dom, next, and prop-types installed. They're specified as peerDependencies.\n\n```\nnpm install --save next-apollo graphql react-apollo isomorphic-fetch\n```\n\n## Documentation\n\nCreate an Apollo configuration object (check out the [Apollo Client API](https://www.apollographql.com/docs/react/basics/setup.html#ApolloClient) for more configuration options). Pass the configuration object to the `withData` higher-order component and export the returned component.\n\n```jsx\nimport { withData } from 'next-apollo'\nimport { HttpLink } from 'apollo-link-http'\n\n// can also be a function that accepts a `context` object (SSR only) and returns a config\nconst config = {\n link: new HttpLink({\n credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`\n uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL\n })\n}\n\nexport default withData(config)\n```\n\nInside your Next.js page, wrap your component with your exported higher order component.\n\n```jsx\nimport withData from '../lib/apollo'\n\nexport default withData(props =>
Hello World
)\n```\n\nThat's it!\n\n## How Does It Work?\n\nNext-apollo integrates Apollo seamlessly with Next by wrapping our pages inside a higher-order component (HOC). Using a HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.\n\nOn initial page load, while on the server and inside `getInitialProps`, the Apollo method, `getDataFromTree`, is invoked and returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.\n\n## Custom Cache\n\nSSR will cease to function if you pass in your own Cache.\nIt is highly suggested that you do not pass in your own Cache in\nthe config unless you want it to drop the SSR functionality.\n\nInstead, to use a custom cache, pass in a `createCache` function.\nFor example, to use a cache with [fragment matching],\n\n```jsx\nimport { withData } from 'next-apollo'\nimport { HttpLink } from 'apollo-link-http'\nimport {\n InMemoryCache,\n IntrospectionFragmentMatcher\n} from 'apollo-cache-inmemory'\n\nimport introspectionQueryResultData from './fragmentTypes'\n\nconst createCache = () => {\n const fragmentMatcher = new IntrospectionFragmentMatcher({\n introspectionQueryResultData\n })\n\n return new InMemoryCache({ fragmentMatcher })\n}\n\nconst config = {\n link: new HttpLink({\n uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn'\n }),\n createCache\n}\n\nexport default withData(config)\n```\n\n[fragment matching]: https://www.apollographql.com/docs/react/recipes/fragment-matching.html\n\n## Data Prefetching\nThis package uses a variation of ScaleAPI's [data prefetching technique](https://github.com/scaleapi/data-prefetch-link) tweaked slightly to work with apollo data. We extend the Next `` component to allow the invocation of `getDataFromTree` when prefetching a page. \n\nDeclarative prefetching example:\n\n```jsx\nimport { Link } from 'next-apollo'\n\n\n Some dynamic page\n\n```\n\nImperative prefetching example:\n```jsx\nimport { Link, prefetch } from 'next-apollo'\n\n\n prefetch('...')}>\n Some dynamic page\n \n\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}