问题描述
我有一个客户端存储,它需要更新 @client(数据库驱动程序的类似物,但用于 Apollo 客户端),如果令牌更改有一个用户存储,关于用户的所有数据都存储在其中,当 @client 更改时,不会启动 UpdateUser 操作,或者启动而是使用来自 ClientStorage 的旧 @client 版本
客户端存储:
(u:User)-[d:Deposit]->[t:Transaction]<-[w:Withdrawal]-(u:User)
用户存储
import {action,computed,makeObservable,observable} from "mobx";
import {setContext} from "@apollo/client/link/context";
import {ApolloClient,ApolloLink,HttpLink,InMemoryCache} from "@apollo/client";
import {onError} from "apollo-link-error";
class Client{
token = localStorage.getItem('token'); //Токен авторизации,самая важная вешь в проекте!
// При запуски он достается из локального хранилища
changetoken(token){ //Функция для того,чтобы при логировании можно было записать новый токен
this.token = token
localStorage.setItem('token',token)
// console.log("CHANGE TOKEN")
}
constructor() {
makeObservable(this,{
token: observable,changetoken: action,AutoUpdatedApolloClient: computed({name: "UPDATE CLIENT"})
})
}
get AutoUpdatedApolloClient(){ //Если токен обновился,то эта вычисляемая функция обновляется и
//предоставляет всем элементам системы новый @client,например если пользователь залогинится,//все последующие запросы и мутации будут происходить от его лица(в частности запрос на
// получение данных о пользователе),так же это позволит в будущем добавлять другие заголоки
//для запросов,если это понадобится
const authLink: any = setContext((_,{ headers }) => {
// процесс создания авторизационного заголовка
return {
headers: {
...headers,authorization: 'JWT '+ this.token,}
}
});
//Ссылка на бэкенд
const httpLink = new HttpLink({
uri: '### SECRET URL ####'
// Additional options
});
const errorLink: any = onError(({ graphQLErrors }) => {
if (graphQLErrors) graphQLErrors.map(({ message }) => console.log(message))
})
//Конечная сборка @client
const client = new ApolloClient({
link: ApolloLink.from([errorLink,authLink,httpLink]),cache: new InMemoryCache()
});
console.log("new client")
//Новый клиент собран и расшеривается между всеми,кто его использует
return(client)
}
}
export default new Client
解决方法
我希望这个答案对将来想要在 MobX 中使用 Apollo 客户端的任何人都有帮助。经过一些实验,我得出的结论是,存储 @client 的最佳方式是使用可观察变量。就我而言,我创建了两个可观察变量 - @client 和 token,以及一个更新令牌的操作,当它运行时,它调用更新客户端的操作并将新令牌传递给这个(客户端更新)操作。在所有其他商店中,必须知道@client 的状态,在类构造函数中,我创建了一个使用 @client 作为谓词的反应,以及一个更新此商店的动作作为反应