1

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

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

请记住，我们不能在 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
          }
        }
      }
    }
  }
}
4

1 回答 1

2

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

如果你想查询客户端，Apollo 可能是经常性的最佳选择。我写了一个完整的方法来使用 Apollo 来获取组件中的动态数据。

对于选择，我强烈推荐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
于 2021-11-22T21:09:44.477 回答