A little doubt about depends data

[yuxino]

hey, i am trying a case of depends data, see this link

Intuitively, I expected swr will auto retry in this case, so i write code like this, but, it's not working ...

const { data } = useSWR(
  "d",
  () => new Promise((res) => setTimeout(() => res({ id: 10 }), 500))
);

const x = useSWR(
  "x",
  () => {
    return data.id;
  }
);

Just throw exception Cannot read property 'id' of undefined.

I only can do this behavior by passing a function to first arguments. see this link

const { data } = useSWR(
  "d",
  () => new Promise((res) => setTimeout(() => res({ id: 10 }), 500))
);

const x = useSWR(
  () => data.id && "x",
  () => {
    return data.id;
  }
);

Can we automatically retry when a revalidate throws an exception and this revalidate has depends data ?

Consider this case, it's has multiple depends data, it's will let keyFunction to be complex

const { data } = useSWR(
  "d",
  () => new Promise((res) => setTimeout(() => res({ id: 10 }), 500))
);

const { data2 } = useSWR(
  "d2",
  () => new Promise((res) => setTimeout(() => res({ arr: [1,2,3] }), 500))
);

const { data3 } = useSWR(
  "d3",
  () => new Promise((res) => setTimeout(() => res({ obj: { attr: { name: 'xxx' } } }), 500))
);

const x = useSWR(
  () => data.id && data2 && data.arr && data.arr.length && data3 && data3.attr && "x",
  () => {
    return data.id + data2.arr.join(",") && data3.attr.name;
  }
);

if can automatically retry, we just need to write that.

const x = useSWR(
  "x",
  () => {
    return data.id + data2.arr.join(",") && data3.attr.name;
  }
);

We can use await, but it will lose parallelism, if there have another request after x

const { data } = await useSWR(
  "d",
  () => new Promise((res) => setTimeout(() => res({ id: 10 }), 500))
);

const { data2 } = await useSWR(
  "d2",
  () => new Promise((res) => setTimeout(() => res({ arr: [1,2,3] }), 500))
);

const { data3 } = await useSWR(
  "d3",
  () => new Promise((res) => setTimeout(() => res({ obj: { attr: { name: 'xxx' } } }), 500))
);

const x = useSWR(
  "x",
  () => {
    return data.id + data2.arr.join(",") && data3.attr.name;
  }
);

const { data4 } = useSWR(
  "d4",
  // do sth
)

const { data5 } = useSWR(
  "d5",
  // do sth
)

Or, we can add a new options like depends ?

const x = useSWR(
  "x",
  () => {
    return data.id + data2.arr.join(",") && data3.attr.name;
  },
  { depends: [data, data2, data3] }
);

When all depends is ready, then execute revalidate ?

It's like

const x = useSWR(
  "x",
  () => {
    return data.id + data2.arr.join(",") && data3.attr.name;
  },
  { revalidateOnMount: false }
);

useEffect(() => {
  if (data && data2 && data3) { x.revalidate() }
}, [data, data2, data3])

hmmm...

In fact, I think retry is not good, because there is a problem with the depends data itself, such as data3.attr = null, in this case, we should't retry ...

[huozhi]

IMO you can create fetcher by useCallback based on the dependencies. and if you want to delay the revalidation until the dependencies are ready, you can either check them in the fecther to decide wether to return the expected reponsese or just don't render the component containing useSWR hook before the dependencies are fulfilled.

• option 1

const fetcher = useCallback(() => ..., [dep1, dep2])

• option 2

dep1 && dep2 && <ComponentUsingSWR />

[yuxino]

but fetcher will be cache ... when dep change , fecher will not be execute ? like that ?

[huozhi]

useCallback(() => {
-   return data.id;
+   return data && data.id;
}

seems the example given will throw error when data is undefined (init render)?

[yuxino]

nothing render, link, revalidate only change when key change. so view will be not update and revalidate function will not be execute again.

[huozhi]

yeah you're right...sorry for my mistake. I guess another approach is to use array key and pass the elements as arguments of fetcher?

useSWR([dep1, dep2, dep3], (...) => ...)

becuz the purpose is to keep the behavior to monitor changes based on key only. then there's only 1 factor (key) effecting the rendering result

[yuxino]

Yes , it can , but not good enough, there are risks, and can't reuse .

First, it's will execute revalidate twice . See the console

Second if i can't reuse this key, if i want to get x data on the children component, it's impossible.

Third array key will be computed to sth like that

If I use it in other places, it will cause problems.

because arg@undefined@undefined@undefined will effect other component.

look that, a fast flash, if i use this key, it will cause some errors that cannot be found in the first time.

such as router change .. A -> B, i will not find any problems when i am coding .. but this problem does exist ...

More terrible is multi-page, A - > B -> C -> D -> E ...

When the test finds me, I will say that my computer is running well. It's your problem 😠