Next.js: react-apollo with local state

[kedarguy]

Examples bug report

Example name

with-apollo

Describe the bug

I am not sure if the source of the bug is with @apollo/react-hooks, or something with the implementation in the example, here are the details and reproduction

Intended outcome:

upgrade an existing Next.js application that has local state to use react-apollo 3.0

I created a repo using nextjs with-apollo example (which was updated to use app/react-hooks and ssr, see below.

I expected that as in previous version of react-apollo, when querying only local data, the loading will always return false and I will get the data synchronously

Actual outcome:
When querying only local data for the first render useQuery returns loading true and no data

this is not consistent with the apollo docs :

import React from "react";
import { useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";

import Todo from "./Todo";

const GET_TODOS = gql`
  {
    todos @client {
      id
      completed
      text
    }
    visibilityFilter @client
  }
`;

function TodoList() {
  const { data: { todos, visibilityFilter } } = useQuery(GET_TODOS);
  return (
    <ul>
      {getVisibleTodos(todos, visibilityFilter).map(todo => (
        <Todo key={todo.id} {...todo} />
      ))}
    </ul>
  );
}

How to reproduce the issue:

https://codesandbox.io/embed/github/kedarguy/apollo-3.0-next-local-state-server-side-bug-reproduction/tree/master/?fontsize=14

Versions
System:
OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver)
Binaries:
Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
Yarn: 1.16.0 - ~/.nvm/versions/node/v10.15.3/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
Browsers:
Chrome: 76.0.3809.100
Firefox: 68.0.2
npmPackages:
apollo-boost: 0.4.4 => 0.4.4

Looking forward to be able to upgrade to the awesome apollo-hooks :)

[iest]

I too am having this issue.

From what I could gather, it seems to stem from next's useRouter() hook returning null — which is the default context value for the router.

It looked like the server singleton router was not null though, so wondering what the root cause is?

For us somehow we still get a valid render eventually, so it's only annoying in so far as we have some extra text in the logs.

Hope this helps!

[kedarguy]

@iest
in this simple example the render also goes through somehow, but in our app it causes bugs and the app to mostly not render server side

[TawKhoury]

@iest
I think your issue is related to #7731 . And has been handled in PR #7732. Try to use AppTree. nextjs example.
@kedarguy You are right. I have the same issue :(

[Timer]

We've completely revamped our Apollo examples so this should be addressed, thanks!