Cannot read properties of null (reading appedChild) | JS na web: CRUD com JavaScript assíncrono

Acompanhei a aula certinho para integrar a API e no final quando era pra serem mostrados os dados dos clientes o console dispara o seguinte erro:

cliente-service.js:30 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at cliente-service.js:30
    at Array.forEach (<anonymous>)
    at XMLHttpRequest.http.onload (cliente-service.js:29)

Vou deixar os códigos abaixo:

cliente-service.js

    const criaNovaLinha = (nome, email) => {
    const linhaNovoCliente = document.createElement('tr')
    const conteudo = `
    <td class="td" data-td>${nome}</td>
    <td>${email}</td>
    <td>
        <ul class="tabela__botoes-controle">
            <li><a href="../telas/edita_cliente.html" class="botao-simples botao-simples--editar">Editar</a></li>
            <li><button class="botao-simples botao-simples--excluir" type="button">Excluir</button></li>
        </ul>
    </td>
    `
    linhaNovoCliente.innerHTML = conteudo
    return linhaNovoCliente
}

const tabela = document.querySelector(['data-tabela'])



const http = new XMLHttpRequest()

http.open('GET', 'http://localhost:3000/profile')

http.send()

http.onload = () => {
    const data = JSON.parse(http.response)
    data.forEach(elemento => {
        tabela.appendChild(criaNovaLinha(elemento.nome, elemento.email))
    })
}

package.json

    {
  "name": "admin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^0.16.2"
  }
}

lista_cliente.html

    <!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doguito Petshop | Clientes</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="../assets/css/base/base.css">
    <link rel="stylesheet" href="../assets/css/componentes/cabecalho.css">
    <link rel="stylesheet" href="../assets/css/lista_cliente.css">
    <link rel="stylesheet" href="../assets/css/componentes/tabela.css">
    <link rel="stylesheet" href="../assets/css/componentes/botao.css">
    <link rel="stylesheet" href="../assets/css/componentes/modal.css">
</head>
<body>
    <header class="cabecalho container">
        <img src="../assets/img/doguitoadm.svg" alt="Logotipo Doguito" class="cabecalho__logo">
        <nav>
            <ul class="cabecalho__lista-navegacao">
                <li class="cabecalho__link"><a href="#">Dashboard</a></li>
                <li class="cabecalho__link"><a href="#">Produtos</a></li>
                <li class="cabecalho__link"><a href="#">Clientes</a></li>
                <li class="cabecalho__link"><a href="#">Pets</a></li>
            </ul>
        </nav>
    </header>

    <main class="clientes-container">
        <table class="tabela">
            <thead>
                <tr>
                    <th class="tabela__coluna--p">Nome</th>
                    <th class="tabela__coluna--g">Email</th>
                    <th class="tabela__coluna--m tabela__alinhamento--direita"><a href="./cadastra_cliente.html" class="botao-simples botao-simples--adicionar">Novo Cliente</a></th>
                </tr>
            </thead>
            <tbody data-tabela>

            </tbody>
        </table>
        <div class="modal-container modal--fechado">
            <article class="modal">
                <h2 class="modal__titulo">
                    Excluir
                </h2>
                <button class="modal__fechar">X</button>
                <p class="modal__texto">Deseja excluir essa entrada?</p>
                <div class="modal__botao-container">
                    <button class="modal__botao modal__botao--confirmar">Excluir</button>
                    <button class="modal__botao">Não excluir</button>
                </div>
            </article>
        </div>
    </main>
</body> 

<script src="../service/cliente-service.js"></script>
</html>

Mergulhe em programação