How to convert multiline string value to a legit JSON string variable in JavaScript?

Question

This original code works fine.

function FetchNormal() {

    const [keyword, setKeyword] = React.useState(null);
    const [response, setResponse] = React.useState(null);
    const [error, setError] = React.useState(null);
    const [isLoading, setIsLoading] = React.useState(false);

    React.useEffect(() => {
        const FetchData = async () => {
            try {
                setError(null)
                setIsLoading(true)
                const method = "POST"
                const headers = {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                };
                const options = {
                    method,
                    headers
                };

                const body = {
                    query: "query GetWikicountByKeyword($keyword: String!)" +
                        "{ wikiCount                                      " +
                        "   (keyword: $keyword) {                         " +
                        "      keyword                                    " +
                        "      totalhits                                  " +
                        "    }                                            " +
                        "}                                                ",
                    variables : "{ \"keyword\": \"" + keyword +"\" }"
                };
                if (keyword == null) {
                    setResponse("No Result");
                } else {
                    if (body) options.body = JSON.stringify(body);
                    const res = await fetch(BASEURL, options);
                    const json = await res.json();
                    setResponse(json.data.wikiCount.keyword + ":" + json.data.wikiCount.totalhits);
                }
            } catch (error) {
                setError(error.toString());
                setResponse(null)
            }
            setIsLoading(false)
        };
        FetchData();
    }, [keyword]);

    return (
        <div>
            <div><SearchBox caption={"Normal Wiki Search"} onSubmit={(keyword) => setKeyword(keyword) }/></div>
            <div>
                {error &&  <SearchResult value={error} />}
                {isLoading ?
                    (<Loading />) :
                    (response && <SearchResult value={response}/>)
                }
            </div>
        </div>
    );
}

However, I dislike the concatenate of String for query . So I change to below.

function FetchNormal() {
    const query = `
    query GetWikicountByKeyword($keyword: String!) {
        wikiCount
            (keyword: $keyword) {
                keyword 
                totalhits
            } 
    "}`.replace("\n", " ").trim()

    const [keyword, setKeyword] = React.useState(null);
    const [response, setResponse] = React.useState(null);
    const [error, setError] = React.useState(null);
    const [isLoading, setIsLoading] = React.useState(false);

    React.useEffect(() => {
        const FetchData = async () => {
            try {
                setError(null)
                setIsLoading(true)
                const method = "POST"
                const headers = {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                };
                const options = {
                    method,
                    headers
                };

                const body = {
                    query: query,
                    variables : "{ \"keyword\": \"" + keyword +"\" }"
                };

                if (keyword == null) {
                    setResponse("No Result");
                } else {
                    if (body) options.body = JSON.stringify(body);
                    const res = await fetch(BASEURL, options);
                    const json = await res.json();
                    setResponse(json.data.wikiCount.keyword + ":" + json.data.wikiCount.totalhits);
                }
            } catch (error) {
                setError(error.toString());
                setResponse(null)
            }
            setIsLoading(false)
        };
        FetchData();
    }, [keyword]);

    return (
        <div>
            <div><SearchBox caption={"Normal Wiki Search"} onSubmit={(keyword) => setKeyword(keyword) }/></div>
            <div>
                {error &&  <SearchResult value={error} />}
                {isLoading ?
                    (<Loading />) :
                    (response && <SearchResult value={response}/>)
                }
            </div>
        </div>
    );
}

But it now fail, as the newline kicks in and no matter how I try to remove it, it stays, causing wrong JSON format.

How could I resolve this?

Answer 1

Oh my bad. Apparently I have an extra "

Replace this

    query GetWikicountByKeyword($keyword: String!) {
        wikiCount
            (keyword: $keyword) {
                keyword 
                totalhits
            } 
    "}`.replace("\n", " ").trim()

with

    query GetWikicountByKeyword($keyword: String!) {
        wikiCount
            (keyword: $keyword) {
                keyword 
                totalhits
            } 
    }`

Works now. Thanks!!