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

Utilities to integrate Apollo and Next.js.
https://github.com/iwatakeshi/apollo-next

Last synced: 6 days ago
JSON representation

Utilities to integrate Apollo and Next.js.

• Host: GitHub
• URL: https://github.com/iwatakeshi/apollo-next
• Owner: iwatakeshi
• License: mit
• Created: 2021-11-25T22:03:59.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-19T15:14:04.000Z (over 1 year ago)
• Last Synced: 2024-12-21T15:13:25.869Z (17 days ago)
• Language: TypeScript
• Size: 1.75 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# apollo-next

Utilities to integrate Apollo and Next.js.

## Usage

1. Install `apollo-next`:

```bash

npm add @iwatakeshi/apollo-next graphql @apollo/client

```

2. Create a custom Apollo client

```ts

export const createApolloClient = () =>

  new ApolloClient({

    ssrMode: typeof window === "undefined",

    // ...

  });

```

3. Set the `ApolloProvider` in `_app` file and initialize Apollo.

```tsx

import { ApolloProvider } from "@apollo/client";

import { useApollo } from "@iwatakeshi/apollo-next";

// Import your custom client

import { createApolloClient } from "../utils/client.apollo";

function MyApp({ Component, pageProps }) {

  return (

    

      

    

  );

}

export default MyApp;

```

4. Use it in your static or server-side rendered pages.

```tsx

import { useQuery } from "@apollo/client";

import { GetStaticProps } from "next";

import { withApollo } from "@iwatakeshi/apollo-next";

// Import your custom client

import { createApolloClient } from "../utils/client.apollo";

export default function MyPage() {

  const { data } = useQuery(/* ... */);

  return 
{/* ... */}
;

}


// Wrap `getStaticProps` or `getServerSideProps` with Apollo

export const getStaticProps = withApollo(

  createApolloClient(),

  async ({ client }) => {

    const { data } = await client.query(/*...*/);

    return {

      props: {

        data,

      },

    };

  }

);

// Or pass a function to access the context: (context) => createApolloClient()

export const getStaticProps = withApollo(

  (context) => createApolloClient(),

  async ({ client }) => {

    const { data } = await client.query(/*...*/);

    return {

      props: {

        data,

      },

    };

  }

);

```