时间戳

首页 > 解决方案 > 使用上下文在 react 应用的根目录中配置 apollo 链接

reactjs - 使用上下文在 react 应用的根目录中配置 apollo 链接

问题描述

我有以下提供者/钩子，

interface IAccessTokenContext {
  accessToken: string
  setAccessToken: (token: string) => void
}

const accessTokenContext = createContext<IAccessTokenContext | null>(null)

export const AccessTokenProvider: FC = ({ children }) => {
  const [accessToken, setAccessToken] = useState("")

  const memoizedContextValue = useMemo(
    () => ({
      accessToken,
      setAccessToken,
    }),
    [accessToken, setAccessToken]
  )

  return (
    <accessTokenContext.Provider value={memoizedContextValue}>
      {children}
    </accessTokenContext.Provider>
  )
}

export const useAccessToken = () => {
  const context = useContext(accessTokenContext)

  if (!context) {
    throw Error("Need context")
  }

  return context
}

我想知道是否可以在我的应用程序的根目录中使用上下文，我认为这是不可能的，因为我想访问令牌并将其设置在根目录以及组件内部，所以可能是另一种方法

const cache = new InMemoryCache()
const { accessToken, setAccessToken } = useAccessToken()

const requestLink = new ApolloLink(
  (operation, forward) =>
    new Observable(observer => {
      let handle: ZenObservable.Subscription

      Promise.resolve(operation)
        .then(operation => {
          if (accessToken) {
...
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
)

标签： reactjs

解决方案

上下文不仅可以存储值，还可以存储对象或函数。

在顶级组件中使用状态。

const [token, setToken] = useState() ; <TokenSetterContext.Provider value={setToken} > 并将此状态管理到您现有的上下文或类似方法中。

推荐阅读