https://github.com/grimmer0125/next-apollo-subscription-example

Next.js React + Apollo GraphQL + WebSocket subscription. Apollo subscription example w/o next.js: https://github.com/daniele-zurico/apollo2-subscriptions-how-to. Working with https://github.com/accounts-js
https://github.com/grimmer0125/next-apollo-subscription-example

graphql nextjs

Last synced: 7 days ago
JSON representation

Next.js React + Apollo GraphQL + WebSocket subscription. Apollo subscription example w/o next.js: https://github.com/daniele-zurico/apollo2-subscriptions-how-to. Working with https://github.com/accounts-js

• Host: GitHub
• URL: https://github.com/grimmer0125/next-apollo-subscription-example
• Owner: grimmer0125
• Created: 2019-04-30T16:19:17.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-05-03T08:43:24.000Z (almost 6 years ago)
• Last Synced: 2024-12-22T00:23:28.342Z (2 months ago)
• Topics: graphql, nextjs
• Language: JavaScript
• Homepage:
• Size: 433 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# next-apollo-subscription-example

## issue

1. If you use https://github.com/accounts-js, its context may make subscription on ApolloServer fail, ref: https://github.com/accounts-js/accounts/pull/565

The workaround way is 

```

    context: async (ctx: any) => {

      const { req, connection } = ctx;

      if (!req || !req.headers) {

        return {};

      }

      let resp = {};

      try {

        resp = accountsGraphQL.context(ctx);

      } catch (err) {

        console.log("accountsGraphQL.context err:", err); // can not read undefind of session

      }

      return resp;

    },

```

## steps

1. use VSCode to launch node.js server (index.ts, pure apollo server)

2. `yarn dev` in next-standalone

3. open http://localhost:3000 to see subscription result

OR you can

1. using the VSCode 2nd launch config to launch apollo-express-erver.ts (open that file first)

2. `yarn dev` in next-standalone

3. open http://localhost:3000 to see subscription result

OR you can

1. using the VSCode 2nd launch config to launch apollo-next-server.ts (open that file first)

2. open http://localhost:3000 to see subscription result

## references

1. https://www.apollographql.com/docs/react/advanced/subscriptions

2. https://www.apollographql.com/docs/react/features/server-side-rendering

3. https://github.com/chrizzzle/modulo

## Key points (uri, websocket lib issue in next.js ssr environment)

1. You many need to set `import fetch from "isomorphic-unfetch"; and HttpLink({fetch:fetch)` once your setting does not find out fetch

2. not use `import ApolloClient from "apollo-boost";` use `import { ApolloClient } from 'apollo-client'/'apollo-boost';`

3. WebSocketLink and HttpLink use the same address:port, they even use the same path (/graphql) if ApolloServer does not specify subscriptions' path

4. ApolloClient do not need to set uri

5. use isomorphic-ws or process.browser? to create WebSocketLink

```

const WebSocket2 = require("isomorphic-ws");

const wsLink = new WebSocketLink({

  webSocketImpl: WebSocket2 // browser can not use ws's WebSocket

});

```

or

```

const wsLink = process.browser

  ? new WebSocketLink(

      new SubscriptionClient(GRAPHQL_WS_ENDPOINT, {

        reconnect: true

      })

    )

  : null;

const link = wsLink

    ? split(

```