Leveraging a value from a 'then' block in a function's return statement in Types

Question

Leveraging a value from a 'then' block in a function's return statement in Types

Here is a function I have:

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

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

I need to set someAuth: myToken in the headers of the return block, but I'm unsure how to do this using the then block.

Additionally:

Normally, I would use

let myToken = await getOktaToken()

, however I cannot make the async function configureClient() as the

ApolloClient<ApolloCache<any>>

raises issues with ES3. Would this approach have worked?

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

javascript typescript apollo react-apollo apollo-client

Answer 1

Answer №1

When dealing with promises, it's important to remember that they are asynchronous. The callback you pass to then will be evaluated after your function has already returned. One way to handle this is by making the entire configureClient function return a Promise. However, keep in mind that this will require you to adjust how you use it in other parts of your application, since the client will now be initialized asynchronously.

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

// Alternatively, you can use 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
    }
  });
}

If you need to wait for the client to be fetched before rendering your app, you can delay the rendering process. Here's an example:



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

  if (!client) {
    return null
  }

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

For fetching headers asynchronously, it's recommended to use apollo-link-context. It's advised to move away from using Apollo Boost and migrate to the latest Apollo Client instead. This allows you to configure links for your client instance and add a Context Link, as demonstrated here.

Answer 2

When dealing with promises, it's important to remember that they are asynchronous. The callback you pass to then will be evaluated after your function has already returned. One way to handle this is by making the entire configureClient function return a Promise. However, keep in mind that this will require you to adjust how you use it in other parts of your application, since the client will now be initialized asynchronously.

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

// Alternatively, you can use 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
    }
  });
}

If you need to wait for the client to be fetched before rendering your app, you can delay the rendering process. Here's an example:



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

  if (!client) {
    return null
  }

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

For fetching headers asynchronously, it's recommended to use apollo-link-context. It's advised to move away from using Apollo Boost and migrate to the latest Apollo Client instead. This allows you to configure links for your client instance and add a Context Link, as demonstrated here.

Leveraging a value from a 'then' block in a function's return statement in Types

Answer №1

Similar questions

Stop options from being hidden in a select dropdown using HTML

Struggling to make fadeIn() function properly in conjunction with addClass

Issues with MEAN stack post method not updating database records

ExpressJS looping back

Autocomplete feature is not functioning properly when trying to use JSON input

Having difficulty with redirecting through angular's routeprovider

The error message "writeUserData is not defined" is indicating that there is an undefined variable in the react code

Using jQuery to create a dynamically moving div that forms an endless wall

Error in GraphQL query: specified argument is mandatory, yet not supplied

Tips on including a trash can symbol to rows in a bootstrap table using React

Utilizing Vue.js to dynamically add a class through computed properties

The JavaScript file specified in the script tag's src attribute was successfully downloaded, but it did not execute as expected after being fetched

"Utilizing multiple optional parameters in Expressjs can lead to the request handler being

What is the best method for loading a script in a PHP file that is triggered by an Ajax request?

retrieve the webpage hosted on the server

What is the best way to sort through received JSON information?

Which is preferable: a tracking pixel or a javascript inclusion?

Learning how to manipulate images by rotating, resizing, and zooming from the corners on a canvas

Exploring Blob functionality in TypeScript?

Implementing a Form Submission Using Ajax in jQuery Without Post Method