Как правильно связать useQuery и useMutation в GraphQL?
У меня есть useQuery и useMutation из react-apollo-hooks подряд. Я хочу иметь возможность использовать возвращаемые значения из useQuery в качестве переменных для useMutation. В настоящее время значения из useQuery не возвращаются вовремя для переменных, что приводит к тому, что переменные не определены.
const { data, error, loading } = useQuery(GET_POSTS, {
variables: {
id: props.match.params.id
}
})
const item = props.match.params.id
const owner = data.posts[0].author.id
const variables = { item , owner, startDate, endDate }
const bookItem = useMutation(CREATE_BOOKING_MUTATION, variables)
Переменная data.posts[0].author.id показывает undefined. Как убедиться, что возвращаемое значение определено вовремя?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
How do I make sure that the returned value is defined in time?
Вы можете просто проверить условие после блока useQuery
ОБНОВИТЬ
Хуки нельзя называть условно.
Обычный совет - поместить условие в useEffect:
const { data, error, loading } = useQuery(GET_POSTS, {
variables: {
id: props.match.params.id
}
})
const item = props.match.params.id
// data.posts can be undefined at start
const owner = loading ? null : data.posts[0].author.id
const variables = { item , owner, startDate, endDate }
const bookItem = useMutation(CREATE_BOOKING_MUTATION, variables)
useEffect(() => {
if (!loading) {
bookItem(); // called when data ready
}
})
Другой вариант: useApolloClient:
useQueryдля загрузки данных, необходимых для мутацииconst client = useApolloClient();useEffect- условно (!loadingилиdataне пусто) использоватьclient.mutate()с извлеченными (в запросе) данными в качестве переменных;
Пользовательский хук можно сделать с 3 параметрами: (query, mutation, { mapDataToVariables })
единственная проблема заключается в том, что если бы я размещал хуки после оператора if, я получаю сообщения об ошибках, такие как «React Hook «useMutation» вызывается условно. React Hooks должны вызываться в одном и том же порядке в каждом рендеринге компонента».
Я думаю, вы можете передавать переменные, когда вы фактически вызываете мутацию, например:
...
const bookItem = useMutation(CREATE_BOOKING_MUTATION)
...
if (!loading && !error && data) {
bookItem({
variables: {
owner: data.posts[0].author.id,
...
}
})
}
Если вы можете запросить эти данные из серверной части, разве у вас уже нет этих данных для использования в распознавателе для мутации?