Question

我正在编写一个自定义钩子，以获取在我的GraphQL模式中定义的一些枚举，以供在表单字段中使用。枚举值显然不会经常更改，但是我想让它们可用于任何表单组件（或任何组件）。我的问题是，无论我如何触发查询，我的钩子总是返回其初始状态。在自定义钩子中有几个数据获取示例，它们都遵循非常相似的模式，例如，类似以下答案：Fetch data with a custom React hook

我首先编写了使用Apollo的useQuery()的钩子，然后将data设置为useEffect()的依赖项。

export const useFormFieldEnums = () => {
  const [ enums, setEnums ] = useState( null )

  const ENUMS_QUERY = gql`
    query FormFieldEnums {
      mailingAddressTypes: __type(name: "MailingAddressType") {
        name
        enumValues {
          name
        }
      }
      emailTypes: __type(name: "EmailType") {
        name
        enumValues {
          name
        }
      }
      phoneTypes: __type(name: "PhoneType") {
        name
        enumValues {
          name
        }
      }
    }
  `

  const { data } = useQuery( ENUMS_QUERY )

  useEffect(() => {
    if ( data ) {
      // result = wrangle data into desired shape
      setEnums( result )
    }
  }, [data])

  return enums
}

通过这种方式，将调度查询（我在浏览器的“网络”标签中看到了请求和响应），但是在查询使用数据解析后，return enums不再执行。

我认为可能是data的{{1}}依赖关系所致，所以我尝试通过useEffect()钩子直接使用Apollo Client的query()方法来允许该查询将以异步方式调度，并且与useApolloClient()没有依赖关系。通过这种方式，查询甚至不会执行。（？）

useEffect()

在两种情况下，即使每次export const useFormFieldEnums = () => { const [ enums, setEnums ] = useState( null ) const client = useApolloClient() const ENUMS_QUERY = gql` query FormFieldEnums { mailingAddressTypes: __type(name: "MailingAddressType") { name enumValues { name } } emailTypes: __type(name: "EmailType") { name enumValues { name } } phoneTypes: __type(name: "PhoneType") { name enumValues { name } } } ` useEffect(async() => { try { const { data } = await client.query({ query: ENUMS_QUERY }) // result = wrangle data into desired shape setEnums( result ) } catch ( error ) { console.error( error ) } }, []) return enums }的值更改时都应执行enums，我总是从钩子中获得return enums的初始状态。大概没有enums被调用，但是我不知道为什么。

感谢您的帮助，谢谢！

自定义钩子中的数据获取总是返回初始状态

0 个答案: