title: Strange issue with useQuery: Query arguments not being read
body: <p>I have a component that passes a string (<code>userToFetch</code>) it as a variable parameter in a parameterized query. The component looks like this:</p>
  
  <pre><code>// pages/index.jsx
  
  import React from 'react';
  import { useQuery } from '@apollo/react-hooks';
  import gql from 'graphql-tag';
  
  const GET_USERS = gql`
    query users ($limit: Int!, $username: String!) {
      users (limit: $limit, where: { username: $username }) {
        username
        firstName
      }
    }
  `;
  
  const Home = () =&gt; {
    const userToFetch = 'jonsnow';
  
    const {
      loading,
      error,
      data,
    } = useQuery(
      GET_USERS,
      {
        variables: { limit: 2, username: userToFetch },
        notifyOnNetworkStatusChange: true,
      },
    );
  
    if (loading) {
      return &lt;p&gt;Loading...&lt;/p&gt;;
    }
  
    if (error) {
      return &lt;p&gt;Error: {JSON.stringify(error)}&lt;/p&gt;;
    }
    return (
      &lt;div&gt;
        &lt;ul&gt;
          {data.users.map(user =&gt; {
            return &lt;li&gt;{user.username} {user.firstName}&lt;/li&gt;;
          })}
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  };
  
  export default Home;
  </code></pre>
  
  <p>And this is how I have configured my Apollo client:</p>
  
  <pre><code>// /apollo-client.js
  
  import { ApolloClient } from 'apollo-client';
  import { InMemoryCache } from 'apollo-cache-inmemory';
  import withApollo from 'next-with-apollo';
  import { createHttpLink } from 'apollo-link-http';
  import fetch from 'isomorphic-unfetch';
  
  const GRAPHQL_URL = 'https://dev.schandillia.com/graphql';
  
  const link = createHttpLink({
    fetch, // Switches between unfetch &amp; node-fetch for client &amp; server.
    uri: GRAPHQL_URL
  });
  
  // Export a HOC from next-with-apollo
  // Docs: https://www.npmjs.com/package/next-with-apollo
  export default withApollo(
    // You can get headers and ctx (context) from the callback params
    // e.g. ({ headers, ctx, initialState })
    ({ initialState, ctx }) =&gt; {
      console.log('initialState', initialState);
      console.log('ctx', ctx);
  
      return new ApolloClient({
        link: link,
        cache: new InMemoryCache()
          //  rehydrate the cache using the initial data passed from the server:
          .restore(initialState || {})
      })
    }
  );
  </code></pre>
  
  <p>The database is a collection of following <code>users</code>:</p>
  
  <pre><code>"users": [
        {
          "username": "negger",
          "firstName": "Arnold",
          "lastName": "Schwarzenegger"
        },
        {
          "username": "jonsnow",
          "firstName": "Jon",
          "lastName": "Snow"
        },
        {
          "username": "tonystark",
          "firstName": "Tony",
          "lastName": "Stark"
        }
      ]
    }
  </code></pre>
  
  <p>Now, although this should work (it does when I run the query in my graphql playground at <a href="https://dev.schandillia.com/graphql" rel="noreferrer">https://dev.schandillia.com/graphql</a>), the code runs as if the <code>where</code> clause didn't exist! It just returns all results as if the query being run were:</p>
  
  <pre><code>users {
    _id
    username
    firstName
  }
  </code></pre>
  
  <p>In order to reproduce the issue, visit <a href="https://www.schandillia.com" rel="noreferrer">https://www.schandillia.com</a>. The page ought to display a list with only one element consisting of a matching username-firstName value: <code>jonsnow Jon</code> but it returns two entries, <code>negger Arnold</code> and <code>jonsnow Jon</code> (respecing <code>limit</code> but completely ignoring <code>where</code>). Now, run the same query with <code>jonsnow</code> as a <code>where</code> parameter in <a href="https://dev.schandillia.com/graphql" rel="noreferrer">https://dev.schandillia.com/graphql</a>:</p>
  
  <pre><code>{
    users(where: { username: "jonsnow" }) {
      _id
      username
      firstName
    }
  }
  </code></pre>
  
  <p>And the results would be exactly as expected:</p>
  
  <pre><code>{
    "data": {
      "users": [
        {
          "_id": "5d9f261678a32159e61018fc",
          "username": "jonsnow",
          "firstName": "Jon",
        }
      ]
    }
  }
  </code></pre>
  
  <p>What am I overlooking?</p>
  
  <p><strong>P.S.</strong>: The repo is up for reference at <a href="https://github.com/amitschandillia/proost/tree/master/apollo-nextjs" rel="noreferrer">https://github.com/amitschandillia/proost/tree/master/apollo-nextjs</a>.</p>
  
  <p><strong>UPDATE</strong>: In order to track down the root cause, I tried logging some values in <code>apollo-client.js</code>:</p>
  
  <pre><code>console.log('initialState', initialState);
  </code></pre>
  
  <p>Strangely, the output shows the right query, along with the variables being passed, but wrong results:</p>
  
  <pre><code>...
  ROOT_QUERY.users({"limit":2,"where":{"username":"jonsnow"}}).0:
    firstName: "Arnold"
    username: "negger"
    __typename: "UsersPermissionsUser"
  ...
  </code></pre>
  
  <p><strong>UPDATE</strong>: Here's a screenshot of results in my Apollo Client Developer Tools:</p>
  
  <p><a href="https://i.stack.imgur.com/62nX9.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/62nX9.jpg" alt="enter image description here"></a></p>