Typescript - использование значения с того времени в блоке возврата функции - PullRequest
Новая
       9

Typescript - использование значения с того времени в блоке возврата функции

0 голосов
/ 13 февраля 2020

У меня есть эта функция: 

function configureClient(): ApolloClient<ApolloCache<any>> {
    let myToken = getOktaToken().then(token => {
        return token
    });

    return new ApolloClient<InMemoryCache>({
        uri: "someUrl",
        cache: new InMemoryCache(),
        headers: {
            someAuth: myToken
        }
    });
}

Я хочу установить someAuth: myToken в headers возвращаемого блока, однако не уверен, как это сделать с помощью этого блока then.

Также добавить:

Вообще, я бы сделал, let myToken = await getOktaToken() - однако я не могу сделать async function configureClient(), так как ApolloClient<ApolloCache<any>> жалуется на некоторые ES3. Я полагаю, это сработало бы? Type 'typeof DefaultClient' in not a valid async function return type in ES5/ES3 because it does not refer to a Promise compatible constructor value

1 Ответ

2 голосов
/ 13 февраля 2020

Обещания асинхронные - обратный вызов, который вы передаете then, оценивается после возврата вашей функции. Вы можете заставить всю функцию configureClient возвращать Promise, но это будет означать, что вам придется изменить способ ее использования в другом месте вашего приложения (опять же, потому что в этот момент весь клиент будет инициализирован асинхронно). 

function configureClient(): Promise<ApolloClient<ApolloCache<any>>> {
  return getOktaToken().then(token => {
    return new ApolloClient<InMemoryCache>({
      uri: "someUrl",
      cache: new InMemoryCache(),
      headers: {
        someAuth: token
      }
    });
  });
}

// or the equivalent using async/await syntax

async function configureClient(): Promise<ApolloClient<ApolloCache<any>>> {
  const token = await getOktaToken()
  return new ApolloClient<InMemoryCache>({
    uri: "someUrl",
    cache: new InMemoryCache(),
    headers: {
      someAuth: token
    }
  });
}

Вы можете отложить рендеринг вашего приложения до получения клиента. Например: 



const App = () => {
  const [client, setClient] = useState(null)
  useEffect(() => {
    configureClient().then(setClient)
  }, [])

  if (!client) {
    return null
  }

  return (
    <ApolloProvider client={client}>
      ...
    </ApolloProvider>
  )
}

Если у вас есть заголовки, которые нужно извлекать асинхронно, однако, предпочтительный способ сделать это - использовать apollo-link-context. Вы должны прекратить использование Apollo Boost или, что еще лучше, перейти на последнюю версию Apollo Client . Затем вы можете настроить ссылки для своего клиентского экземпляра и добавить контекстную ссылку, как показано здесь .

...