如何处理反应式异步获取输入字段错误？

Question

I have a store binded to an input box which re-fetches some data after every input, but when I either delete all the values in the input or set the input to outside of the bounds of what the fetch can retrieve, I get the following error and the bind seems to break and no longer responds to changes until I reload the page:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'newThing.property')
    at Object.update [as p] (index.svelte:85:40)
    at update (index.mjs:1093:36)
    at flush (index.mjs:1060:13)

index.svelte

<script>
  let Id
  export let thingStore = writable({})
  $: if (Id >= 0) {
          getNewThing(Id).then(newThing => thingStore.set(newThing))
          } else {
         getNewThing(0).then(newThing => thingStore.set(newThing))
          }
</script>

<input type="text" bind:value={Id}>
<div>
  {$thingStore.property}
</div>

getNewThing takes in values greater than 0 in order to receive a successful response.

import { client } from "../lib/graphql-client";
import { gql } from "graphql-request";

const maxId = 9675

export const getNewThing = async (Id) => {
  if (Id === undefined) {
    Id = Math.floor(Math.random() * maxId)
  }
    try {
        const query = gql`
        query newThing{ property: "${Id}" }        
    `;
        const newThing = await client.request(query)
        return newThing
    } catch (error) {
        return{
            status:500,
            body: {error: 'There was an error.' }
        }
    }
}

Answer 1

The error object returned from an OOB input was causing a crash when the app went to read a non-existent property. Modified my error object to include a .property property by default.

import { client } from "../lib/graphql-client";
import { gql } from "graphql-request";

const maxId = 9675

export const getNewThing = async (Id) => {
  if (Id === undefined) {
    Id = Math.floor(Math.random() * maxId)
  }
    try {
        const query = gql`
        query newThing{ property: "${Id}" }        
    `;
        const newThing = await client.request(query)
        return newThing
    } catch (error) {
        return{
            status:500,
            property: {error: 'There was an error.' }
        }
    }
}