Получение других данных из БД, чем в GraphiQL

Я новичок в graphQL и mongoDB, и я пытаюсь заставить его работать в моем проекте. Проблема в том, что данные из запроса в GraphiQL полностью отличаются от данных из того же запроса внутри моей клиентской части. Вот моя настройка схемы:

const graphql = require('graphql');
const _ = require('lodash');
const Item = require('../models/item');
const {
  GraphQLObjectType,
  GraphQLString,
  GraphQLSchema,
  GraphQLID,
  GraphQLInt,
  GraphQLList
} = graphql;

const ItemType = new GraphQLObjectType({
  name: 'Item',
  fields: () => ({
    name: {
      type: GraphQLString
    },
    id: {
      type: GraphQLID
    },
    description: {
      type: GraphQLString
    },
    price: {
      type: GraphQLInt
    },
    image: {
      type: GraphQLString
    },
    category: {
      type: GraphQLString
    }
  })
});

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: {
    item: {
      type: ItemType,
      args: {
        id: {
          type: GraphQLID
        }
      },
      resolve(parent, args) {
        // code to get data from db / other source
        return Item.findById(args.id);
      }
    },
    items: {
      type: new GraphQLList(ItemType),
      resolve(parent, args) {
        return Item.find({})
      }
    }
  }
});

Когда я делаю запрос из graphiQL, все элементы и данные, которые я получаю, являются «правильными». Выглядит это так:Получение других данных из БД, чем в GraphiQL

Когда я делаю тот же точный запрос из внешнего интерфейса, например: импорт { gql } из "apollo-boost";

const getItemsQuery = gql`
  {
    items {
      name
      id
      description
      price
      image
      category
    }
  }
`;

export { getItemsQuery };

Данные выглядят так: Получение других данных из БД, чем в GraphiQL

Похоже, он повторяет первый элемент снова и снова, и я не понимаю, почему. БД также показывает правильные элементы. Мой серверный код можно найти здесь: https://github.com/KamilStaszewski/shoppy/tree/adding_graphQL/серверПолучение других данных из БД, чем в GraphiQL

Это действительно странно. Вероятно, это проблема на стороне клиента. Может быть, это связано с тем, как вы используете свой запрос в своем приложении React, можете ли вы дать мне ссылку на файл, где это происходит, в вашем github или включить его в свой пост? Не могу найти (может ты не туда нажал)

Saraband 26.02.2019 17:56

Здесь используется запрос: github.com/KamilStaszewski/shoppy/blob/adding_graphQL/client‌​/… и данные из него передаются и отображаются в этот компонент github.com/KamilStaszewski/shoppy/blob/adding_graphQL/client‌​/…

Kamil Staszewski 26.02.2019 17:58

Это похоже на проблему с кэшированием. Используете ли вы собственный экземпляр ApolloCache? Можете ли вы опубликовать свою конфигурацию клиента?

Daniel Rearden 26.02.2019 18:01

Я новичок в этом, поэтому я не думаю, что использую собственный экземпляр apollocache. Все по умолчанию. Есть create-react-app и mongodbatlast с конфигурацией по умолчанию, если вы имеете в виду конфигурацию моего клиента.

Kamil Staszewski 26.02.2019 18:04

Не могли бы вы показать, где вы сделали вызов запроса для items и установить производительность

Ashh 26.02.2019 18:11

А также items реквизит. где вы устанавливаете данные внутри него.

Ashh 26.02.2019 18:20

Реквизиты, выводящие консоль на экран, взяты отсюда: github.com/KamilStaszewski/shoppy/blob/adding_graphQL/client‌​/… Здесь сначала вызывается запрос, затем данные передаются компоненту списка покупок, где они отображаются.

Kamil Staszewski 26.02.2019 18:23

Просто дикая догадка, можете ли вы очистить кеш браузера, чтобы увидеть, сохраняется ли ошибка; возможно, браузер кэшировал более старую версию идентификатора вашего приложения.

Saraband 26.02.2019 18:26

Я только что сделал после вашего комментария, и данные все еще выглядят одинаково. : /

Kamil Staszewski 26.02.2019 18:29

@DanielRearden есть новые идеи? я не могу двигаться с прошлой недели с этим : /

Kamil Staszewski 26.02.2019 18:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
11
139
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Из документы:

The InMemoryCache normalizes your data before saving it to the store by splitting the result into individual objects, creating a unique identifier for each object, and storing those objects in a flattened data structure. By default, InMemoryCache will attempt to use the commonly found primary keys of id and _id for the unique identifier if they exist along with __typename on an object.

Другими словами, Apollo будет использовать как __typename, так и id для создания ключа кэша для каждого Item, который вы извлекаете. Этот ключ используется для извлечения соответствующего элемента из кэша. Проблема в том, что ваши товары возвращаются null за их id. Это приводит к тому, что каждый элемент записывается с одним и тем же ключом. В результате, когда результат вашего запроса возвращается из кеша, он ищет один и тот же ключ для каждого элемента в вашем массиве items.

Чтобы решить эту проблему, вам нужно убедиться, что ваш API возвращает значение для id. Я не так много работал с мангустом, но я думаю, что, поскольку мангуст автоматически добавляет для вас поле id на основе _id, должно быть достаточно просто удалить id из вашей модели мангуста (а не вашего типа GraphQL). В качестве альтернативы вы можете попробовать добавить функцию разрешения в поле id в типе GraphQL:

resolve: (item) => item._id.toString()

Спасибо. Проверим это.

Kamil Staszewski 28.02.2019 19:10

Ты был прав. После того, как я удалил свойство id из моей модели мангуста, реквизиты были правильно переданы из graphQL. Большое Вам спасибо.

Kamil Staszewski 01.03.2019 21:18

Другие вопросы по теме