https://github.com/adamsoffer/next-apollo

React higher-order component for integrating Apollo Client with Next.js
https://github.com/adamsoffer/next-apollo

Last synced: 3 months ago
JSON representation

React higher-order component for integrating Apollo Client with Next.js

• Host: GitHub
• URL: https://github.com/adamsoffer/next-apollo
• Owner: adamsoffer
• License: mit
• Created: 2017-10-19T23:46:31.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-05-25T14:40:53.000Z (over 1 year ago)
• Last Synced: 2024-07-08T15:32:22.791Z (4 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.22 MB
• Stars: 481
• Watchers: 8
• Forks: 64
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Next Apollo [![Build Status](https://travis-ci.org/adamsoffer/next-apollo.svg?branch=master)](https://travis-ci.org/adamsoffer/next-apollo)

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

[Demo](https://next-with-apollo.vercel.app/)

## Installation

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

```

npm install --save next-apollo graphql @apollo/client

```

## 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/client";

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) => 
Hello World
;


// Default export is required for Fast Refresh

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