Question

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

这是它的抽象结构：

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

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

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

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

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

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

应用程序应在启动时响应。
在第一次渲染时，该应用程序已离线或尚未通过身份验证
1. 因此，它必须从缓存中读取（如果可用）
2. 如果没有缓存，请不要向服务器发出任何请求（它们都会失败）
如果用户在线，则应用程序应获取请求的身份验证令牌
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,
    cache,
  });
}

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

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

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

0 个答案: