Как правильно связать useQuery и useMutation в GraphQL?

Question

У меня есть useQuery и useMutation от реакции-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 показывает неопределенное.Как мне убедиться, что возвращаемое значение определено во времени?

Answer 1

Как мне убедиться, что возвращаемое значение определено во времени?

Вы можете просто проверить условие после useQuery block

---

ОБНОВЛЕНИЕ

Крючки не могут быть вызваны условно.

Обычный совет - поместить условие в 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 })

Answer 2

Я думаю, что вы можете передавать переменные, когда вместо этого вызываете мутацию, что-то вроде:

...
const bookItem = useMutation(CREATE_BOOKING_MUTATION)
...
if(!loading && !error && data) {
  bookItem({
    variables: {
      owner: data.posts[0].author.id,
      ...
    }
  })
}