Javascript NextJS Fetch - Google API "Must specify at least one request"

Question

I'm trying to create an NextJS application that will automate a google doc based on a team selection.

Plan is, when you click on a button that says "generate report" for that team, it will give you a list of all the players and their stats, like so:

"PLAYER 1"

Points	Rebounds	Assists
12.4	4.5	5

I'm currently having issues with getting the Google Doc API to play ball.

I can successfully make a request, that will create a document in my google drive, however, I am unable to perform a batch update to add even text to the document. I get an error on the network request:

{
  "error": {
    "code": 400,
    "message": "Must specify at least one request.",
    "status": "INVALID_ARGUMENT"
  }
}

I've read through the google documentation, however, I'm not sure of the best way to proceed. Here's my code for the request below:

 const createDoc = (teamName: string) => {
    const fileName: string = `${teamName} Scouting Report 2023`;

    const requestBody: any = {
      requests: [
        {
          insertText: {
            text: 'THIS IS A  BIG OLD TEST TO SEE IF THIS WORKS YA YEET',
            endOfSegmentLocation: {},
          },
        },
      ],
    };
    const parsedRequest: any = JSON.stringify(requestBody);

    fetch(`https://docs.googleapis.com/v1/documents?title=${fileName}`, {
      method: 'POST',
      //   @ts-ignore
      headers: new Headers({ Authorization: 'Bearer ' + session?.accessToken }),
    })
      .then((res: any) => {
        return res.json();
      })
      .then((val) => {
        console.log(val);
        console.log(val.documentId);
        const documentId = val.documentId;
        fetch(
          `https://docs.googleapis.com/v1/documents/${documentId}:batchUpdate`,
          {
            method: 'POST',
            headers: new Headers({
              //   @ts-ignore
              Authorization: 'Bearer ' + session?.accessToken,
            }),
            // @ts-ignore
            payload: JSON.stringify({
              requests: [
                {
                  insertText: {
                    text: 'THIS IS A  BIG OLD TEST TO SEE IF THIS WORKS YA YEET',
                    endOfSegmentLocation: {},
                  },
                },
              ],
            }),
          },
        );
      })
      .then((res: any) => {
        console.log(res);
      })
      .catch((err) => console.error(err));
  };

Answer 1

I believe your goal is as follows.

• You want to remove this issue of INVALID_ARGUMENT of however, I am unable to perform a batch update to add even text to the document. I get an error on the network request: by modifying your showing script.

In your script, how about the following modification?

From:

fetch(
  `https://docs.googleapis.com/v1/documents/${documentId}:batchUpdate`,
  {
    method: 'POST',
    headers: new Headers({
      //   @ts-ignore
      Authorization: 'Bearer ' + session?.accessToken,
    }),
    // @ts-ignore
    payload: JSON.stringify({
      requests: [
        {
          insertText: {
            text: 'THIS IS A  BIG OLD TEST TO SEE IF THIS WORKS YA YEET',
            endOfSegmentLocation: {},
          },
        },
      ],
    }),
  },
);

To:

fetch(
  `https://docs.googleapis.com/v1/documents/${documentId}:batchUpdate`,
  {
    method: 'POST',
    headers: new Headers({
      //   @ts-ignore
      Authorization: 'Bearer ' + session?.accessToken,
      "Content-Type": "application/json"
    }),
    // @ts-ignore
    body: JSON.stringify({
      requests: [
        {
          insertText: {
            text: 'THIS IS A  BIG OLD TEST TO SEE IF THIS WORKS YA YEET',
            endOfSegmentLocation: {},
          },
        },
      ],
    }),
  },
);

Refererence:

• Method: documents.batchUpdate