使用GraphQL变量和Next JS过滤数组中的数据_使用变量选项过滤对象数组中的数组- js_使用数组中的条件过滤数组内的数据 - 腾讯云开发者社区

基础概念

GraphQL是一种用于API的查询语言，它允许客户端精确地请求所需的数据。GraphQL变量允许你在查询中传递动态值，而不是硬编码的值。这使得查询更加灵活和可重用。

Next.js是一个流行的React框架，用于构建服务器渲染的应用程序。结合GraphQL和Next.js，你可以创建高效且灵活的前端应用程序。

类型

GraphQL变量可以是标量类型（如字符串、整数、布尔值）或复杂类型（如对象、列表）。变量的类型需要在GraphQL模式中定义。

应用场景

在Next.js中使用GraphQL变量来过滤数组中的数据是一个常见的应用场景。例如，你可能有一个包含多个项目的列表，并希望根据用户的输入动态过滤这些项目。

示例代码

假设你有一个GraphQL API，返回一个项目列表：

type Query {
  projects: [Project]
}

type Project {
  id: ID!
  name: String!
  category: String!
}

你可以使用GraphQL变量来过滤这些项目。以下是一个Next.js组件示例，展示了如何使用GraphQL变量来过滤项目：

import { gql, useQuery } from '@apollo/client';
import { useState } from 'react';

const GET_PROJECTS = gql`
  query GetProjects($category: String) {
    projects(category: $category) {
      id
      name
      category
    }
  }
`;

function ProjectList() {
  const [categoryFilter, setCategoryFilter] = useState('');

  const { loading, error, data } = useQuery(GET_PROJECTS, {
    variables: { category: categoryFilter },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <input
        type="text"
        placeholder="Filter by category"
        value={categoryFilter}
        onChange={(e) => setCategoryFilter(e.target.value)}
      />
      <ul>
        {data.projects.map((project) => (
          <li key={project.id}>
            {project.name} - {project.category}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProjectList;