在 React 自定义 Hook 中没有 Hook 的 Apollo mutate

Question

我在 React 组件中调用自定义挂钩：

const [CallMe, { loading, data, error }] = useCustomHook({
    onCompleted(res) {
        console.log(res)
    },
    onError(err) {
        console.log(err)
    },
})

这是通过 onClick 事件启动的：

onClick={() => CallMe() }

自定义挂钩由以下部分组成：

export function useCustomHook({ onCompleted, onError }) {

/**
 * Use State
 */

const [loading, setLoading] = useState(false)
const [data, setData] = useState(null)
const [error, setError] = useState(null)

/**
 * Get Thing
 */

function GetThing() {
    setLoading(true)
    callExternalApi
        .method()
        .then(({ data, error }) => {
            setLoading(false)
            if (error) {
                setError(error)
                onError(error)
            }
            if (data) {
                CALL TO MUTATION NEEDED HERE (NON HOOK)             
            }
        })
}

return [GetThing, { loading: loading, data: data, error: error }]
}

成功返回数据后，我想触发一个 Mutation，但我不希望通过 useMutation Apollo 挂钩完成此操作。

因此，我的问题是我如何以无挂钩的方式触发这个突变，这仍然允许我在这个自定义挂钩中更新 Apollo Cache on response？

我知道我可以通过 Fetch 简单地执行 HTTP 请求，但这不会给我在整个应用程序中使用的 inMemoryCache 优势。 我必须在自定义挂钩中初始化 Apollo 吗？

欢迎任何想法或建议。

Answer 1

似乎在我的自定义挂钩中我可以导入 Apollo Client，这让我能够使用突变和查询。

import { useApolloClient } from '@apollo/client'

然后在您导出的自定义挂钩中：

client
        .mutate({
            mutation:MUTATION,
            variables: {
                Input: input,
            },
        })
        .catch((error) => {
            console.log(error)
        })
        .then((result) => {
            console.log(result)})