Запрос GraphQL возвращает ошибку. Фильтр не является функцией

Question

Я пытаюсь вернуть некоторые данные из API, который выдает мне сообщение об ошибке «userAPI.filter не является функцией».Проект настроен с сервером json, и у меня также есть файл db.js, который содержит массив объектов.Проблема, которую я имею, заставляет фильтр работать с сервером json.Я уже проверил это, и я могу получить данные обратно из локального файла .js без проблем.Я даже могу получить данные с сервера json для получения всех пользователей.

Это просто не работает, когда я использую фильтр внизу.У меня такое ощущение, что это как-то связано с данными, которые я получаю с помощью axios, возможно, переменная не является массивом?Но это работает для возвращения всех пользователей.И я уверен, что фильтр работает правильно, так как работает с тестовым массивом объектов userAPI2 в файле.

  const axios = require('axios');

const Query = {
    greeting(parent, args, ctx, info) {
        if(args.name) {
            return `Hello ${args.name}!`
        } else {
            return 'Hello!'
        }
    },
    avengers(parent, args, ctx, info) {
        if(args.name) {
            return `Your favourite character is ${args.name}`
        } else {
            return 'Avengers Assemble!'
        }
    },
    hello(parent, args, ctx, info) {
        return "Hello World"
    },
    me() {
        return {
            id: "abc123",
            name: "John",
            email: "example@gmail.com",
            age: 32
        }
    },
    users(parent, args, {db}, info) {
        // Import from an external API server in this case json-server
        const userAPI = axios.get('http://localhost:3004/users')
        .then(response => {
            return response.data
        })

        if (!args.query) {
            // Import from local .js file
            return db.users 

            // Import from an external API server in this case json-server
            //return userAPI 
        }
            // Import from local .js file
            // return db.users.filter((user) => {
            //     return user.name.toLowerCase().includes(args.query.toLowerCase())
            // })

            const userAPI2 = [
                {
                id: '1',
                name: 'User1',
                email: 'user1@user1.com',
                age: 32,
                },
                {
                id: '2',
                name: 'User2',
                email: 'user2@user2.com',
                age: 32,
                },
                {
                id: '3',
                name: 'User3',
                email: 'user3@user3.com',
                age: 32,
                }
            ]

            // Import from local .js file
            // return db.users.filter((user) => {
            //     return user.name.toLowerCase().includes(args.query.toLowerCase())
            // })

            // Import from an external API server in this case json-server
            return userAPI.filter((user) => {
                return user.name.toLowerCase().includes(args.query.toLowerCase())
            })
    }
}

export {Query as default}

Answer 1

Переменная userAPI содержит возвращаемое значение вызова axios.get.Методы запроса Axios (например, request, get, post и т. Д.) Возвращают Promise, который будет преобразован в объект ответа.Это тот самый объект ответа, который содержит data, который в данном случае будет массивом.

Если вы хотите filter данные, вы должны сделать это в цепочке Promise, возвращаемой преобразователем,например:

users(parent, args, {db}, info) {
  return axios.get('http://localhost:3004/users')
    .then(response => {
      if (!args.query) {
        return response.data  
      }
      return response.data.filter((user) => {
        return user.name.toLowerCase().includes(args.query.toLowerCase())
      })
    })
}

Или используя async / await:

users: async (parent, args, {db}, info) => {
  const { data } = await axios.get('http://localhost:3004/users')
  if (!args.query) {
    return data  
  }
  return data.filter((user) => {
    return user.name.toLowerCase().includes(args.query.toLowerCase())
  })
}