API_KEY' is defined but never used 'CONTEXT_KEY' is assigned a value but never used

Question

I've created a file called keys.js, where it houses my API_KEY. I've exported it from that file and imported it into my useGoogleSearch.js file. However, it's not properly importing and my error keeps returning as "'API_KEY' is defined but never used 'CONTEXT_KEY' is assigned a value but never used Unexpected template string expression".

I think it has to do with my url - 'https://www.googleapis.com/customsearch/v1? key=${API_KEY}&cx=${CONTEXT_KEY}&q=${term}'.

import { useState, useEffect } from "react";
import API_KEY from "./keys";

const CONTEXT_KEY = "ANOTHER KEY";

const useGoogleSearch = (term) => {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async() => {
            fetch('https://www.googleapis.com/customsearch/v1?key=${API_KEY}&cx=${CONTEXT_KEY}&q=${term}')
                .then(response => response.json())
                .then(result => {
                    setData(result)
                })
         }

        fetchData();
     }, [term])

     return { data };
};

export default useGoogleSearch

Answer 1

You defined your API URL as a string here.

fetch('https://www.googleapis.com/customsearch/v1?key=${API_KEY}&cx=${CONTEXT_KEY}&q=${term}')

So your variables API_KEY and CONTEXT_KEY are not evaluated as values. Instead, use Template literals.

fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&cx=${CONTEXT_KEY}&q=${term}`)