javascript - 如何在GraphQL中正确链接useQuery和useMutation？

我有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显示未定义。如何确保及时定义返回的值？

最佳答案

您可以在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()与获取的(在查询中)数据一起用作变量；

定制钩子(Hook)可以通过3个参数完成:(query, mutation, { mapDataToVariables })