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()}))

SolidJS•3y ago•

1 reply

FjordWarden

Abort resource

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()}))

Abort resource

Similar Threads

Abort resource

Similar Threads

Similar Threads

Similar Threads