Блог

Я создал API с помощью JSON-сервера и пытаюсь извлечь из него данные с помощью клиента React-Apollo.

Я пытаюсь зарегистрировать данные из API на консоли с помощью тега запроса, реструктурировать и распечатать переменную данных с помощью console.log() .

Я понятия не имею, почему функция получает print через console.log() .

У меня есть текущая настройка:

• Сервер JSON запущен на ПОРТУ 4000
• Сервер запущен на ПОРТУ 5000
• Клиент запущен на ПОРТУ 3000

Я уже использую инструмент CORS

Ниже приведен мой компонент:

 const BOOKS_QUERY = gql`
    query BooksQuery {
        books {
            title
            author
            editionYear
        }
    }
`;

<Query query={BOOKS_QUERY}>
  {({ loading, error, data }) => {
     if (loading) return <h4>Loading...</h4>;
     if (error) console.log(error);
     console.log(data);

    return <h1>test</h1>;
  }}
</Query>

  

Приведенный ниже контент является кодом для моей схемы:

 
const BookType = new GraphQLObjectType({
    name: 'Book',
    fields: () => ({
        id: { type: GraphQLInt },
        title: { type: GraphQLString },
        author: { type: GraphQLString },
        editionYear: { type: GraphQLInt }
    })
});

//Root Query

const RootQuery = new GraphQLObjectType({
    name: 'RootQueryType',
    fields: {
        books: {
            type: new GraphQLList(BookType),
            resolve(parent, args) {
                return axios.get('http://localhost:4000/books').then((res) => res.data);
            }
        },
        book: {
            type: BookType,
            args: {
                id: { type: GraphQLInt }
            },
            resolve(parent, args) {
                return axios.get(`http://localhost:4000/books/${args.id}`).then((res) => res.data);
            }
        }
    }
});

module.exports = new GraphQLSchema({
    query: RootQuery
});


  

API:

 
{
    "books": [
        {
            "id": "1",
            "title": "Java How To Program",
            "author": "Deitel amp; Deitel",
            "editionYear": "2007"
        },
        {
            "id": "2",
            "title": "Patterns of Enterprise Application Architecture",
            "author": "Martin Fowler",
            "editionYear": "2002"
        },
        {
            "id": "3",
            "title": "Head First Design Patterns",
            "author": "Elisabeth Freeman",
            "editionYear": "2004"
        },
        {
            "id": "4",
            "title": "Internet amp; World Wide Web: How to Program",
            "author": "Deitel amp; Deitel",
            "editionYear": "2007"
        }
    ]
}

  

Я ожидаю, что данные API будут регистрироваться только на консоли.

Позже я выведу эти данные на экран.