更新

Question

我有来自react-apollo-hooks的背靠背的useQuery和useMutation。我希望能够将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块之后检查条件~~

更新

不能有条件地调用钩子。

通常的建议是在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,
      ...
    }
  })
}

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

2 个答案:

更新