分配前使用的打字稿变量

Question

按照 here 之后的说明，我正在尝试在构建我的 Apollo 客户端之前缓存我的端点 URL 和来自 Auth0 的令牌：

import React from 'react';
import { ApolloClient, ApolloProvider, from, HttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/link-context';
import { useAuth0 } from './auth/AuthContext';

const App: React.FC = () => {
 const { isLoading, getTokenSilently, getIdTokenClaims } = useAuth0();

 if (isLoading) return <Loader />;

 let endpoint: string;
 let token: string;
 const contextLink = setContext(async () => {
  if (!token) {
   token = await getTokenSilently();
  }
  if (!endpoint) {
   endpoint = await getIdTokenClaims()['https://example.com/graphql_endpoint'];
  }

  return { endpoint, token };
 });

 /**
  * TODO: check for autorization error and remove token from cache
  * See: https://www.apollographql.com/docs/react/v3.0-beta/api/link/apollo-link-context/
  */

 const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([
   contextLink,
   new HttpLink({
    uri: endpoint || '',
    headers: {
     'Content-Type': 'application/json',
     Authorization: `Bearer ${token}`
    }
   })
  ])
 });

 return (
  <ApolloProvider client={apolloClient}>
   <div />
  </ApolloProvider>
 );
};

export default App;

对于上面的 endpoint 和 token，我都收到了错误 TS2454（变量在赋值之前被使用）。知道如何解决这个问题吗？

Answer 1

您将 endpoint 和 token 都声明为变量，但在 setContext 中检查它们之前没有将它们初始化为任何内容。

    let endpoint: string;
    let token: string;
    const contextLink = setContext(async () => {
        if (!token) {
            token = await getTokenSilently();
        }
        if (!endpoint) {
            endpoint = await getIdTokenClaims()['https://example.com/graphql_endpoint'];
        }

        return { endpoint, token };
    });

尝试设置默认值：

let endpoint: string = "";
let token: string = "";

分配前使用的打字稿变量

Typescript variable being used before assigned

single-page-application

apollo

auth0

react-apollo

apollo-client