In the api route.ts file, a JSON Response type is returned using axios

Question

In the api route.ts file, a JSON Response type is returned using axios

Creating an MSA involves utilizing both a front server and backend server. In this case, the frontend calls the api/route structure file api, which then calls the backend api using axios. However, I keep encountering a red line error mark when trying to use return new Response(callAxios()), most likely due to the inability to confirm the type as JSON or String.

https://i.sstatic.net/RcnAz.png

import axios from "axios"

export async function GET(request: Request) {
  return new Response(callAxios())
}

async function callAxios(){
  await axios.get('http://localhost:8080/firstCall', {
    params: { // query string
      title: 'NEXT JS'
    },
    headers: { 
      'X-Api-Key': 'my-api-key'
    },
  }).then(res => {
      console.log(res.data)
      return res.data
  })
}

I am still able to retrieve JSON data despite the error mark, but how can I eliminate it? Note that I am new to TypeScript and have just started learning today.

Can you help me resolve the error mark and ensure the correct acceptance of data types?

typescript next.js

Answer 1

Answer №1

This is the revised code snippet that I propose:

import fetch from "isomorphic-fetch"

export async function fetchData(request: Request) {
  return new Response(await handleFetch())
}

async function handleFetch(){
  const response = await fetch('http://localhost:5000/dataFetch', {
    method: 'GET',
    headers: { 
      'Authorization': 'Bearer my-access-token'
    },
  });

  console.log(response, response.json());
  return response.json();
}

The best practice is to either utilize async and await or stick with callbacks, not mix both approaches.

Answer 2

This is the revised code snippet that I propose:

import fetch from "isomorphic-fetch"

export async function fetchData(request: Request) {
  return new Response(await handleFetch())
}

async function handleFetch(){
  const response = await fetch('http://localhost:5000/dataFetch', {
    method: 'GET',
    headers: { 
      'Authorization': 'Bearer my-access-token'
    },
  });

  console.log(response, response.json());
  return response.json();
}

The best practice is to either utilize async and await or stick with callbacks, not mix both approaches.

In the api route.ts file, a JSON Response type is returned using axios

Answer №1

Similar questions

Trouble with loading TypeScript Express REST API routes!

How to eliminate Image notifications in NextJS

Is it feasible to select which modules to be loaded into the application?

Styling components in React using Styled Components is versatile and can

Is there a way for me to retrieve the text generated by OpenAI in the completion response?

Encountering issues with utilizing Eeflector within a custom interceptor in NestJS. Module import error preventing functionality

A beginner's guide to integrating components in Aframe with Nextjs

Leveraging Angular Firebase MatTable with the power of 2 observables in 1

Troubleshooting: Issue with Button Layout in Ionic's ItemSliding Component

What is the best approach to defining a type for a subclass (such as React.Component) in typescript?

The SeekTo function in react-player is not working as expected

Searching for a specific document using AngularFirestore - what's the best method?

Is it beneficial to use TypeScript for writing unit tests?

Is there a way to include values in the body of an HTTP GET request using Angular?

What is the process for ensuring that the "ng-multiselect-dropdown" is a mandatory field within Angular 7?

What is the best way to sequentially invoke methods in Angular?

(Angular) Best methods to search for a specific string in an array

Experiencing difficulty accessing the response header in Angular 16 due to CORS restrictions

Error: Couldn't locate Next.js - TypeScript module

Save user's email and password for future logins after the initial login