Блог

Я новичок в react / graphql / apollo, однако я следовал руководству о том, как выполнить запрос graphql с использованием Apollo наwww.apollographql.com. Однако, похоже, я не могу показать результат.

Это код, который я выполняю для выполнения запроса

 import React from "react";
import { useQuery } from 'react-apollo';
import gql from "graphql-tag";

const GET_PRODUCTS = gql`
  query getProducts{
    products(first: 1) {
      edges {
        node {
          id
          name
        }
      }
    }
}
`;

const StartPage = () => {
  const { loading, error, returnData } = useQuery(GET_PRODUCTS, {
    variables: {},
  });
 
  return (
    <p>Hello world, this should be the data: {returnData}</p>
  );
};

  

Я вижу только «Привет, мир, это должны быть данные»: но возвращаемые данные не печатаются?
Разве я не могу просто распечатать весь ответ?

Когда я перезагружаю страницу, я могу четко видеть на вкладке сети, что мой запрос выполняется, и я получаю правильный ответ

запрос

 {"operationName":"getProducts","variables":{},"query":"query getProducts {n  products(first: 1) {n    edges {n      node {n        idn        namen        __typenamen      }n      __typenamen    }n    __typenamen  }n}n"} 
  

ответ

 {"data":{"products":{"edges":[{"node":{"id":"UHJvZHVjdDo3Mg==","name":"Apple Juice","__typename":"Product"},"__typename":"ProductCountableEdge"}],"__typename":"ProductCountableConnection"}}}
  

Итак, у кого-нибудь есть идея, почему returnData не печатается / пуста?

Это должно быть const { loading, error, data } = useQuery(GET_PRODUCTS, ...); Примечание: data вместо returnData .

Когда вы разрушаете объекты, вам нужно быть точным, когда дело доходит до ключа. Если вам нужны данные для хранения в переменной с именем returnData , вы могли бы сделать что-то вроде этого:

 const { loading, error, data: returnData } = useQuery(GET_PRODUCTS, {
  variables: {},
});
  

Также имейте в виду, что в React вы не можете просто отображать объекты внутри фигурных скобок, React ожидает строку или число. Для быстрой отладки вы могли бы добавить

 return (
  <p>Hello world, this should be the data: {JSON.stringify(returnData)}</p
);
  

В противном случае вы должны отображать данные из глубины возвращаемого объекта.