1

我在 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 缓存响应？

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

欢迎任何想法或建议。

4

1 回答 1

0

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

import { useApolloClient } from '@apollo/client'

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

client
        .mutate({
            mutation:MUTATION,
            variables: {
                Input: input,
            },
        })
        .catch((error) => {
            console.log(error)
        })
        .then((result) => {
            console.log(result)})
于 2022-02-10T07:14:39.063 回答