执行多个阿波罗查询和突变后如何更新本地状态?

Question

我是阿波罗的新手，我错过了一些东西。 我有一个查询来获取当前登录的用户，该用户在页面加载时运行，并且它从我的最顶级组件之一执行(与还包含 react-router 的匹配逻辑的组件相同(：

export const GET_USER = gql`
query {
me {
id
email
}
}
`

然后非常嵌套在 DOM 树中，我有登录和注销按钮，它们都会触发突变，这些突变将为当前用户设置或取消设置会话。 但。。。此时如何更新应用顶部的状态？

我读过这篇博客文章，建议将 Apollo Hooks 包装到其他自定义钩子中：

const useAuth = () => {
const { data: getUserData } = useQuery(GET_USER)
const [login, { data: loginData } = useMutation(LOGIN)
const [logout, { data: logoutData } = useMutation(LOGOUT)
// Should I find out here if I have a user id or not?
// It's doable, but not clean
return { login, logout, userId }
}

以这种方式发出请求对我来说非常不直观，我很容易理解在 Redux 或 MobX 操作中产生这些副作用......因此，我将直接从那里使用Apollo客户端，即使它不是Apollo文档中建议的解决方案。

我有什么不对的？

Answer 1

它将如下所示。重要的部分是突变在收到响应后调用更新函数。这是您手动更新缓存的位置。目标是替换阿波罗缓存中的"我"的值。令人满意的部分是，一旦你开始工作，从useQuery检索的数据将自动更新(因此使用此钩子重新渲染组件(。这是文档的链接。

const useAuth = () => {
const { data: getUserData } = useQuery(GET_USER)
const [mutateLogin] = useMutation(LOGIN)
const [mutateLogout] = useMutation(LOGOUT)
function login(..args) {
mutateLogin({
variables: args,
update(proxy, {data}) {
proxy.writeQuery({
query: GET_USER,
data: {
me: (GET USER FROM data)
}
})
}
})
}
function logout() {
mutateLogout({
update(proxy, {data}) {
proxy.writeQuery({
query: GET_USER,
data: {
me: null
}
});
}
})
}
return { login, logout, userId }
}

Answer 2

在我的应用中，我使用apollo-cache-inmemory来管理应用状态。我的应用程序是单一的事实来源状态，它似乎是 redux。当你想在阿波罗状态下操作数据时，你应该使用useQuery来查询客户端的数据，使用useMutation来更新阿波罗状态。您可以在此处阅读有关如何与 Apollo 中的缓存数据进行交互的更多信息。
这是一个例子：在client.js：

import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { ApolloClient } from 'apollo-client';
const client = new ApolloClient({
link: new HttpLink(),
cache: new InMemoryCache(),
resolvers: {
Mutation: {
setSearchText : (_, { searchValue }, {cache}) => {
cache.writeData({
data: {
searchText: searchValue,
},
	    })
}
}
}
});
const initialState = {
searchText: ''
}
cache.writeData({ data: initialState})

在SearchBox.js

import React from 'react'
import { useQuery, useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag'
const SET_SEARCH_TEXT = gql`
	mutation SetSearchText($searchValue: String!) {
		setSearchText(searchValue: $searchValue) @client
	}
`
const GET_SEARCH_TEXT = gql`
	query SearchText {
		searchText @client
	}
`
const SearchBox = () => {
const { data: searchTextData, loading, error } = useQuery(GET_SEARCH_TEXT)
const [setSearchText] = useMutation(SET_SEARCH_TEXT)
const [value, setValue] = React.useState(searchTextData.searchText || '')

handleChange = (e) => {
setValue(e.target.value)
}

onSubmit = () => {
setSearchText({variables: { searchValue: value }}).then(data => console.log(data))
}
return (
<div>
<input type="text" value={value} onChange={handleChange} />
<button onClick={onSubmit}>Submit</button>
</div>
)
}