SolidJS•2y ago

Abort resource

I am building some full text search input field and got the basic thing working. Next I want to add support to abort the previous fetch request because they can take a while and currently they build up with every token I type. This is my current attempt at a solution, but it has a problems. I never finishes the any fetch because it is aborted in the effect at the same time the resource runs. What is the suggested solution to accomplish this, I can't be the first to try this but I find very little info on how to do this with SolidJs.

const controller = new AbortController();
  const [form,setForm] = createStore({text:'',limit:10}),
    query = ()=>[`limit=${form.limit}`,form.text?`text=fts(english).${form.text}`:null].filter(e=>e!==null).join('&'),
    [files] = createResource(query, async q => {
      let result = [];
      try { result = await(await fetch(`${ENDPOINT}/company?${q}`,{signal:controller.signal})).json(); }
      catch(e) { console.log({e}) } return result
    });
  onMount(()=>createEffect(()=>{query();console.log('abort');controller.abort()}))

const controller = new AbortController();
  const [form,setForm] = createStore({text:'',limit:10}),
    query = ()=>[`limit=${form.limit}`,form.text?`text=fts(english).${form.text}`:null].filter(e=>e!==null).join('&'),
    [files] = createResource(query, async q => {
      let result = [];
      try { result = await(await fetch(`${ENDPOINT}/company?${q}`,{signal:controller.signal})).json(); }
      catch(e) { console.log({e}) } return result
    });
  onMount(()=>createEffect(()=>{query();console.log('abort');controller.abort()}))

1 Reply

FjordWarden•2y ago

Ok, my bad looks like I can just use: import {makeAbortable} from "@solid-primitives/resource";

Gaming

Programming

Abort resource