Below is my code to get data from remote server.

import * as React from 'react';
import { useEffect, useState } from 'react';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import TextField from '@mui/material/TextField';
import { styled } from '@mui/material/styles';

const URL = process.env.REACT_APP_URL;
const API = process.env.REACT_APP_API;
const APPID = process.env.REACT_APP_APPID;

const PageTitle = styled(Typography)({
    fontSize: '30px',
    marginBottom: '20px',
});

const SearchField = styled(TextField)({
    width: '100%',
});

export default function Search() {
    const [filterableData, setfilterableData] = useState();

    useEffect(() => {
        async function fetchData() {
            const response = await fetch(`${URL}${API}`, {
                method: 'GET',
                headers: {
                    'app-id': APPID,
                },
            });         const data = await response.json();
            console.log(data);
        }
        fetchData();
    });

    const search = (event) => {
        console.log(event.target.value);
    };

    return (
        <Container maxWidth="lg">
            <PageTitle>Search</PageTitle>
            <SearchField
                id="outlined-search"
                label="Enter search query"
                type="search"
                onChange={search}
            />
        </Container>
    );
}

It throws below error.

Type '{ 'app-id': string | undefined; }' is not assignable to type 'HeadersInit | undefined'.
  Type '{ 'app-id': string | undefined; }' is not assignable to type 'undefined'.  TS2322

    26 |            const response = await fetch(`${URL}${API}`, {
    27 |                method: 'GET',
  > 28 |                headers: {
       |                ^
    29 |                    'app-id': APPID,
    30 |                },
    31 |            });

Searched over the internet and the solutions I got was related to making interface etc. But none of those solutions worked for me. Any idea how to solve this?

CodePudding user response：

You should try to use Headers class

const headers = new Headers();
if(APPID) {
  headers.set('app-ip', APPID);
}


async function fetchData() {
  const response = await fetch(`${URL}${API}`, {
    method: 'GET',
    headers
});  

 

 

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

headers: {
  'app-id': APPID as string,
},

above solved my problem.

CodePudding user response：

It seems a bug in lib.dom.d.ts, but you still have some choices to figure it out.

• Type assertion.

    fetch({
        headers: {'app-id': APPID} as Headers
    })

• Ignore it.

    fetch({
      // @ts-ignore
      headers: {'app-id': APPID}
    })

• Use Headers Api.

  fetch({
      headers: new Headers({'app-id': APPID}) 
    })
  

if you want to make older browsers compatible, you should import a Headers polyfill first. Note that code below has not been tested.

  (function(){
    if(typeof Headers !== 'function') {
      window.Headers = function(headers: Record<string, string>){return headers}
    }
  })()

For the solutions listed above, I recommend type assertions the most.

CodePudding user response：

the issue is that APPID can be undefined as this is an enviroment variable. You should test is is not undefined or force it using ! if you are sure it is defined (i.e. tested before the function is called)

const url = process.env.REACT_APP_URL;
const API = process.env.REACT_APP_API;
const APPID = process.env.REACT_APP_APPID;


async function fetchData():Promise<void> {
  const response = await fetch(`${url}${API}`, {
      method: 'GET',
      headers: {
          'app-id': APPID ?APPID:"", // or 'app_id':APPID!
      },
  });         const data = await response.json();
  console.log(data);
}
fetchData();