GraphQL 查询返回错误 .filter 不是函数

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数据，你必须在resolver返回的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())
      })
    })
}

或者使用异步/等待：

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())
  })
}