使用 GraphQL 变量和 Next JS 过滤数组中的数据答案

【问题标题】：Filter data in array using GraphQL variables and Next JS使用 GraphQL 变量和 Next JS 过滤数组中的数据
【发布时间】：2022-01-01 08:56:20
【问题描述】：

尝试使用 GraphQL 变量和 Next JS 过滤数据。如何将我的状态传递给 GraphQL 变量“name”？

handleSelectedFilter 将根据所选选项更新过滤器状态。我期望过滤器状态的值被传递给“name”变量。

请记住，我们不能在 Next js getStaticProps 函数中使用反应钩子，尝试过状态管理，自定义钩子 ..etc 不适用于 Next JS。

非常感谢任何形式的帮助。提前致谢。

export async function getStaticProps() {

 const { data, errors } = await client.query({
    query: GET_LISTINGS,
    variables: {
        uri: '/listing/',
        name: filter?.city
    }
  })
  return {
    props: {
        data: data || [],
    },
    revalidate: 1
  }
}

const listings = ({ data }) => {
  const [filter, setFilter] = useState({
      city: '',
      area: '',
      type: '',
  })

  const handleSelectedFilter = e => {
    setFilter({ ...filter, [e.target.name]: e.target.value })
  }
}
export default listings

GrpahQL 架构如下

export const GET_LISTINGS = gql`
query GET_LISTINGS( $name: String) {
listingCategoriesL: listingCategories(where: {name: [$name]}) {
   nodes {
     id
     name
     listings {
       edges {
          node {
           id
           title
          }
        }
      }
    }
  }
}

【问题讨论】：

标签： variables react-hooks graphql next.js graphql-schema

【解决方案1】：

使用 Next，您的查询会在构建时处理，因此您无法在页面构建后在 getStaticProps 中动态查询。但是你有很多选择。

如果你想查询客户端，Apollo 可能是经常性的最佳选择。我wrote up a whole approach on using Apollo to fetch dynamic data in a component。

对于选择，我强烈推荐react-select。很棒的项目，我一直在使用它。您可能应该为您的 UI 预设一组静态过滤器句柄（因为您不希望用户只是打开过滤器而什么也看不到）。

我不能 100% 确定您要使用哪种 UI，但这可以帮助您完成大部分工作...

import React from 'react'
import { useQuery, gql } from '@apollo/client'
import Select from 'react-select'

// Your query
const LISTINGS_DATA = gql`
  query GET_LISTINGS( $name: String) {
    listingCategoriesL: listingCategories(where: {name: [$name]}) {
      nodes {
        id
        name
        listings {
          edges {
            node {
              id
              title
            }
          }
        }
      }
   }
}
`

// How to style react-select
const selectStyles = {
  control: (provided, state) => ({
    ...provided,
    borderRadius: 0,
    fontWeight: 700,
    padding: '10px',
    textTransform: 'uppercase',
    minWidth: '250px'
  })
}

// Component
const Listings = ({ data }) => {

  const [filter, setFilter] = useState({
      city: '',
      area: '',
      type: '',
  })

  const handleSelectedFilter = e => {
    setFilter({ ...filter, [e.target.name]: e.target.value })
  }

  const selectOptions = [
    { value: x, label: 'Filter 1' },
  ]

  // Query for nav menu from Apollo, this is where you pass in your GraphQL variables
  const { loading, error, data } = useQuery(LISTINGS_DATA, {
    variables: {
      "name": filter,
    }
  })

  return (
   <>
     <Select 
        defaultValue={ selectOptions[0] }
        onChange={ event => handleSelectedFilter(event) }
        options={ selectOptions }
        styles={ selectStyles }
     />
   </>
  )
}
export default Listings

【讨论】：