# next-apollo-test

> React higher-order component for using the Apollo GraphQL client inside Next.js

Latest version **4.0.2** (published 2020-05-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-apollo-test
pnpm add next-apollo-test
yarn add next-apollo-test
bun add next-apollo-test
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.2 |
| Published | 2020-05-01 |
| First published | 2019-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 52.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 477 |
| Author | Adam Soffer |
| Maintainers | ads1018 |
| Keywords | nextjs, graphql, apollo, reactjs |

## Links

- npm: https://www.npmjs.com/package/next-apollo-test
- Repository: https://github.com/adamsoffer/next-apollo
- Homepage: https://github.com/adamsoffer/next-apollo#readme
- Issues: https://github.com/adamsoffer/next-apollo/issues
- npm.io page: https://npm.io/package/next-apollo-test

## Dependencies (6)

- [url](https://npm.io/package/url.md) ^0.11.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.9.6
- [prop-types-exact](https://npm.io/package/prop-types-exact.md) ^1.2.0
- [isomorphic-unfetch](https://npm.io/package/isomorphic-unfetch.md) ^3.0.0

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 4.0.2 (latest) — 2020-05-01
- 4.0.1 — 2020-05-01
- 4.0.0 — 2020-05-01
- 3.1.5 — 2019-09-01
- 3.1.4 — 2019-09-01
- 3.1.3 — 2019-09-01
- 3.1.2 — 2019-09-01
- 3.1.1 — 2019-09-01
- 3.1.0 — 2019-09-01
- 2.0.11 — 2019-02-21
- 2.0.10 — 2019-02-21
- 2.0.9 — 2019-02-20

## README

# Next Apollo [![Build Status](https://travis-ci.org/adamsoffer/next-apollo.svg?branch=master)](https://travis-ci.org/adamsoffer/next-apollo) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/next-apollo)

A package for using Apollo within a Next.js application.

## Installation

This project assumes you have react, react-dom, and next installed. They're specified as peerDependencies.

```
npm install --save next-apollo graphql apollo-boost @apollo/react-hooks @apollo/react-ssr
```

## Documentation

Create an Apollo Client, pass it into to the `withApollo` higher-order component and export the returned component.

```jsx
import { withApollo } from 'next-apollo'
import ApolloClient, { InMemoryCache } from 'apollo-boost';

const apolloClient = new ApolloClient({
  uri: "https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn",
  cache: new InMemoryCache()
});

export default withApollo(apolloClient)
```

Inside your Next.js page, wrap your component with your exported higher order component.

```jsx
import withApollo from '../lib/apollo'

const Page = props => <div>Hello World</div>

export default withApollo({ ssr: true })(Page);
```

That's it!

## How Does It Work?

Next-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.

On 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.

## License

MIT

---
_Source: https://npm.io/package/next-apollo-test · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._