在分配之前，正在使用的 Typescript 变量

本文是小编为大家收集整理的关于在分配之前，正在使用的 Typescript 变量的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

按照指令遵循在这里，我正在尝试在构造我的apollo客户端之前从auth0缓存我的端点URL和令牌:

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(在分配之前使用变量).任何想法我如何绕过这个?

推荐答案

您将声明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 = "";

本文地址：https://www.itbaoku.cn/post/1938086.html

百度翻译此文有道翻译此文

问题描述

As per instructions followed here, I'm trying to cache my endpoint URL and token from Auth0 before constructing my Apollo client:

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;

I'm getting the error TS2454 (variable is used before being assigned) for both endpoint and token above. Any idea how I can get around this?

推荐答案

You're declaring both endpoint and token as variables, but not initializing them to anything before checking them inside of 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 };
    });

Try setting default values:

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

上一篇：apollo 客户端从商店中删除，没有突变。

下一篇：使用Apollo-客户端对GitHub API v4进行认证