Странная проблема с useQuery: аргументы запроса не читаются - PullRequest
Новая
       20

Странная проблема с useQuery: аргументы запроса не читаются

6 голосов
/ 11 октября 2019

У меня есть компонент, который передает строку (userToFetch) в качестве параметра переменной в параметризованном запросе. Компонент выглядит следующим образом: 

// 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 = () => {
  const userToFetch = 'jonsnow';

  const {
    loading,
    error,
    data,
  } = useQuery(
    GET_USERS,
    {
      variables: { limit: 2, username: userToFetch },
      notifyOnNetworkStatusChange: true,
    },
  );

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {JSON.stringify(error)}</p>;
  }
  return (
    <div>
      <ul>
        {data.users.map(user => {
          return <li>{user.username} {user.firstName}</li>;
        })}
      </ul>
    </div>
  );
};

export default Home;

И вот как я настроил свой клиент Apollo: 

// /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 & node-fetch for client & 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 }) => {
    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 || {})
    })
  }
);

База данных представляет собой коллекцию следующих users: 

"users": [
      {
        "username": "negger",
        "firstName": "Arnold",
        "lastName": "Schwarzenegger"
      },
      {
        "username": "jonsnow",
        "firstName": "Jon",
        "lastName": "Snow"
      },
      {
        "username": "tonystark",
        "firstName": "Tony",
        "lastName": "Stark"
      }
    ]
  }

Теперь, хотя это должно сработать (это происходит, когда я запускаю запрос на моей площадке Graphql на https://dev.schandillia.com/graphql),, код выполняется так, как если бы предложение where не существовало! Он просто возвращает все результатыкак если бы выполнялся запрос: 

users {
  _id
  username
  firstName
}

Чтобы воспроизвести проблему, посетите https://www.schandillia.com. На странице должен отображаться список только с одним элементом, состоящим из соответствующего значения username-firstName: jonsnow Jon, но он возвращает две записи: negger Arnold и jonsnow Jon (соответственно limit, но полностью игнорируя where). Теперь выполните тот же запрос с jonsnow, как параметр where в https://dev.schandillia.com/graphql:

{
  users(where: { username: "jonsnow" }) {
    _id
    username
    firstName
  }
}

И результаты будут в точности такими, как ожидалось: 

{
  "data": {
    "users": [
      {
        "_id": "5d9f261678a32159e61018fc",
        "username": "jonsnow",
        "firstName": "Jon",
      }
    ]
  }
}

Что я пропускаю?

PS : репо вышлодля справки по https://github.com/amitschandillia/proost/tree/master/apollo-nextjs.

ОБНОВЛЕНИЕ : чтобы найти основную причину, япопытался записать некоторые значения в apollo-client.js: 

console.log('initialState', initialState);

Странно, но вывод показывает правильный запрос вместе с передаваемыми переменными, но неверные результаты: 

...
ROOT_QUERY.users({"limit":2,"where":{"username":"jonsnow"}}).0:
  firstName: "Arnold"
  username: "negger"
  __typename: "UsersPermissionsUser"
...

ОБНОВЛЕНИЕ : Вот скриншот результатов в моих инструментах разработчика Apollo Client:

enter image description here

1 Ответ

1 голос
/ 20 октября 2019

Схема, сгенерированная Strapi, дает атрибуту where тип JSON, и, следовательно, вам необходимо передать всю часть where в переменной запроса как JSON, поскольку переменные не вводятся. 

# Write your query or mutation here
query users($where: JSON) {
  users(where: $where) {
    username
    firstName
  }
}

Ипеременные будут выглядеть так: 

{"where": {"username": "jonsnow"}}
...