выборка данных в кастомном хуке всегда возвращает начальное состояние - PullRequest
Новая
       10

выборка данных в кастомном хуке всегда возвращает начальное состояние

0 голосов
/ 17 июня 2020

Я пишу собственный хук для получения некоторых перечислений, определенных в моей схеме GraphQL, для использования в полях формы. Очевидно, что значения перечисления не так часто меняются, но я хотел сделать их доступными для любого компонента формы (или любого компонента). Моя проблема в том, что независимо от того, как я запускаю запрос, мой хук всегда возвращает свое начальное состояние. Есть несколько примеров выборки данных в пользовательских хуках, и все они следуют довольно схожему шаблону, например, примерно так: Получение данных с помощью пользовательского хука React

Сначала я написал крючок для использования useQuery() Apollo, и я установил 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
}

Сделано таким образом, запрос отправляется (я вижу запрос и ответ в сети браузера tab), но return enums больше не выполняется после разрешения запроса с данными.

Я подумал, что, возможно, виновата зависимость data от useEffect(), поэтому я попытался использовать метод query() клиента Apollo напрямую, через ловушку 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 изменяется. Предположительно, setEnums( result ) не звонят, но я не могу понять, почему.

Любая помощь приветствуется, спасибо!

...