S
SolidJS•2w ago
Jason.json

Solid Start create resource refetch issue

Hi I am looking for a solution to force refetch the resource provided below. I used { refetch } method and it works sometimes idk why. My temporary solution is to fetch new data is just by using window.location.reload(). example route: /employees/{id: UUID} 
 const [employee, { refetch }] = createResource(async () => get_employee(params.id), {
    deferStream: true,
  });
 const [employee, { refetch }] = createResource(async () => get_employee(params.id), {
    deferStream: true,
  });
I want to refetch the data when user updates the employee data like so: 
<SomeSaveChangesButton
 onClick={
   async () => {
     const response = await fetch(...);
      if (response.ok) {
        refetch();
      }
   } 
  } />
<SomeSaveChangesButton
 onClick={
   async () => {
     const response = await fetch(...);
      if (response.ok) {
        refetch();
      }
   } 
  } />
I think it does not refetch the data due to constant id from url path. If somone here know a right solution I would be greateful. 🙏
3 Replies
Longestlam
Longestlam•2w ago
Not sure if this is the issue but maybe you can try to pass params.id to get_employee by the source argument in createResource instead if it's not reactive. 
const [employee, { refetch }] = createResource(() => params.id, get_employee, {
  deferStream: true,
})
const [employee, { refetch }] = createResource(() => params.id, get_employee, {
  deferStream: true,
})
https://docs.solidjs.com/reference/basic-reactivity/create-resource#the-fetcher
createResource - Solid Docs
Documentation for SolidJS, the signals-powered UI framework
Longestlam
Longestlam•2w ago
Actually I tested and it should still work in your way. Do you mind share a bit more code? 
export default function ID() {
  const params = useParams();
  const [employee, { refetch }] = createResource(
    async () => get_employee(params.id),
    {
      deferStream: true,
    },
  );

  return (
    <div>
      <button
        type="button"
        onClick={async () => {
          const res = await get_employee("1");
          if (res.name) refetch();
        }}
      >
        get
      </button>
      {JSON.stringify(employee())}
    </div>
  );
}
export default function ID() {
  const params = useParams();
  const [employee, { refetch }] = createResource(
    async () => get_employee(params.id),
    {
      deferStream: true,
    },
  );

  return (
    <div>
      <button
        type="button"
        onClick={async () => {
          const res = await get_employee("1");
          if (res.name) refetch();
        }}
      >
        get
      </button>
      {JSON.stringify(employee())}
    </div>
  );
}
By your code logic, is it not refetching even when response.ok is true?
Jason.json
Jason.jsonOP•2w ago
All fixed The issue was that the params.id was not reactive at all. my solution: 
const [employee, { refetch }] = createResource(
    () => params.id,
    get_employee,
    {
      deferStream: true,
    }
  );
const [employee, { refetch }] = createResource(
    () => params.id,
    get_employee,
    {
      deferStream: true,
    }
  );
thx man for help! 👍

Did you find this page helpful?