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

Posted 2023-03-10

【中文标题】使用 GraphQL 变量和 Next JS 过滤数组中的数据

【英文标题】：Filter data in array using GraphQL variables and 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
          
        
      
    
  

【参考方案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