apollographql / react-apollo

:recycle: React integration for Apollo Client
https://www.apollographql.com/docs/react/
MIT License
6.85k stars 790 forks source link

querying local data server side returns loading true for first render causing errors #3390

Closed kedarguy closed 5 years ago

kedarguy commented 5 years ago

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

scrnli_8_19_2019_5-46-18 PM

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 :)

youfoundron commented 5 years ago

This may be related to #3338

hwillson commented 5 years ago

Duplicate of https://github.com/apollographql/react-apollo/issues/3338. Let's continue the discussion over there. Thanks!