执行多重依赖突变 - grandstack apollo graphql 3.3答案

【问题标题】：to perform multiple dependent mutation - grandstack apollo graphql 3.3执行多重依赖突变 - grandstack apollo graphql 3.3
【发布时间】：2021-05-11 03:40:46
【问题描述】：

我对如何在 graphql 中执行多重变异有点困惑。

我已阅读有关使用 graphql() 函数或 compose() 函数的文章，但我不明白这些是否是旧的方法（版本 2）或者仍然是一种有效的方式。

我目前正在使用带有 grandstack 的 apollo 3.3，在我的组件中我执行以下操作来执行突变（我使用了 ApolloClient 提供的 useMutation() 钩子）

const CreateFBUser = gql `
  mutation CreateFBUser($name: String, $fbId: String!) {
    CreateFBUser(name: $name, fbId: $fbId) {
        _id
        id
        fbId
        name
    }
  }
`

function FbUserForm() {

    const { id } = useParams()
    const [formState, setFormState] = useState({})
    
    const [createFBUser,{data: createData}] = useMutation(CreateFBUser)

    const { loading, error, data } = useQuery(FBUser,{
        variables: {_id: id}
    }); 
    ...
    ..
    .

如你所见，我没有使用过 <Query> 之类的组件..

第一个问题：这个组件与 apollo 旧版本有关吗？还在经常使用还是useMutation()钩子是阿波罗3号的首选？

第二个问题：我需要执行与第一个相关的第二个突变，并且我需要从第一个突变生成的 id 来执行第二个

//the first mutation
const CreateFBUser = gql `
  mutation CreateFBUser($name: String, $fbId: String!) {
    CreateFBUser(name: $name, fbId: $fbId) {
        _id
        id
        fbId
        name
    }
  }
`

//the second mutation (pseudocode)
const AddFBUserMemberOf = gql`  
    mutation AddFBUserMemberOf($from: _GroupInput!, $to: _FBUserInput!) {
        AddFBUserMemberOf(from: $from, to: $to) {
            from
            to
        }
    }
`

此外，第二个变异应该根据一个值/一个变量/其他东西有条件地执行

【问题讨论】：

使用效果或onCompleted ...组件失败/在编写/依赖方面很痛苦

标签： reactjs graphql apollo-client react-apollo grandstack

【解决方案1】：

渲染道具组件已弃用，不会收到进一步的更新或错误修复according to the docs

关于你的第二个问题；从useMutation 返回的变异函数采用options parameter 中的onCompleted 属性，该属性在变异成功完成后执行。

const [createFBUser,{data: createData}] = useMutation(CreateFBUser)
const [addFBUserMemberOf] = useMutation(AddFBUserMemberOf)

createFBUser({
  variables: {
    //...
  },
  onCompleted: (data) => {
    // data contains the result of createFBUser
    addFBUserMemberOf({
      variables: {
        //...
      }
    })
  }
})

【讨论】：