Object literal may only specify known properties, and ''app-id'' does not exist in type 'Headers'

Question

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?

Answer 1

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 });

Answer 2

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

above solved my problem.

Answer 3

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.

Answer 4

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 (ie 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();