如何使用 MobX 动态更新 Apollo Client头文件

如何解决如何使用 MobX 动态更新 Apollo Client头文件

我有一个客户端存储，它需要更新 @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 作为谓词的反应，以及一个更新此商店的动作作为反应