在异步令牌上初始化Apollo客户端的安全方法

编程问答 2022-08-12

问题描述

我正在编写一个使用Apollo Client对MongoDB Realm数据库进行graphql请求的应用程序。

这是它的抽象结构：

<MongoContext>
  <ApolloContext>
    <App/>
  </ApolloContext>
</MongoContext>

顶级组件处理用户身份验证并提供上下文。下一个组件向下启动Apollo Client和缓存逻辑，并将上下文设置为整个应用程序。

预期数据流显示在this page上的图表中。 useQuery的默认行为是Apollo：

  1. 尝试从缓存中获取；
  2. 尝试从服务器获取；如果成功，则保存到缓存。

我的目标是实现离线功能。因此，再次参考该图，当缓存保存数据时，第一个查询应由缓存解决。 Apollo的默认缓存机制是在内存中 ，因此我正在使用apollo-cache-persist将其缓存到localStorage。

更具体地说，这些是必需的条件：

  1. 应用程序应在启动时响应。
  2. 在第一次渲染时，该应用程序已离线或尚未通过身份验证
    1. 因此，它必须从缓存中读取（如果可用）
    2. 如果没有缓存，请不要向服务器发出任何请求（它们都会失败）
  3. 如果用户在线，则应用程序应获取请求的身份验证令牌
    1. 令牌是异步请求的
    2. 虽然令牌未知，但仅从缓存中读取（如上述1.2所述）
    3. 知道令牌后，使用上述数据流

我的主要问题特别是上面的1.2和2.2。即阻止Apollo在已经知道它将失败的情况下向服务器发出请求。

我也在寻找一种全局解决方案，因此不能选择使用skip或useLazyQuery修改单个查询。 （而且我什至不确定那是否可行，我仍然需要针对缓存执行查询。）

代码：

ApolloContext组件：

import * as React from 'react';
import {
  ApolloClient,InMemoryCache,ApolloProvider,createHttpLink,normalizedCacheObject,} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { persistCache } from 'apollo-cache-persist';
import { PersistentStorage } from 'apollo-cache-persist/types';


const ApolloContext: React.FC = ({ children }) => {
  // this hook gets me the token asynchronously
  // token is '' initially but eventually resolves... or not
  const { token } = usetoken();
  const cache = new InMemoryCache();
  const [client,setClient] = React.useState(createApolloClient(token,cache))

  // first initialize the client without the token,then again upon receiving it
  React.useEffect(() => {
    const initPersistCache = async () => {
      await persistCache({
        cache,storage: capacitorStorageMethods,debug: true,});
    };
    const initApollo = async () => {
      await initPersistCache();
      setClient(createApolloClient(token,cache));
    };
    if (token) {
      initApollo();
    } else {
      initPersistCache();
    }
  },[token]);
  console.log('id user',id,user);

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

function createApolloClient(
  token: string,cache: InMemoryCache
) {

  const graphql_url = `https://realm.mongodb.com/api/client/v2.0/app/${realmAppId}/graphql`;

  const httpLink = createHttpLink({
    uri: graphql_url,});
  
  const authorizationHeaderLink = setContext(async (_,{ headers }) => {
      return {
        headers: {
          ...headers,Authorization: `Bearer ${token}`,},};
  });
  return new ApolloClient({
    link: authorizationHeaderLink.concat(httpLink),cache,});
}

我尝试过的事情：

尝试了许多不同的事情之后。我发现了一些可行的方法，但是看起来很糟糕。诀窍是给Apollo一个自定义的fetch，当用户未登录时，它拒绝所有请求：


  const customFetch = (input: RequestInfo,init?: Requestinit | undefined) => {
    return user.isLoggedIn
      ? fetch(input,init)
      : Promise.reject(new Response());
  };

  const httpLink = createHttpLink({
    uri: graphql_url,fetch: customFetch,});

防止出站请求的另一种方法是只忽略link属性：

  return new ApolloClient({
    link: user.isLoggedIn
      ? authorizationHeaderLink.concat(httpLink)
      : undefined,});
}

这看起来更干净，但是现在的问题是，使缓存无法满足的查询永久挂起。（related issue）

我正在寻找一种更清洁，更安全的方法。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

apolloapolloapolloapollo-clientionic-frameworkreactjsreactjsreactjsreactjs