Create eslint rule(s) for fetchSync, useShopQuery and useQuery

[juanpprieto]

Based on discord discussion

Q: So, fetchSync in server components only? because I have a Suspense boundary outside the component

A: The fetchSync utility can only be used during rendering because it's supposed to
work with React's Suspense. When making requests from click handlers, you can use
the normal fetch instead 👍.
It can be used in client components as well, but only during rendering (in the main body of the function):
----
`fetchSync` within useEffect

❌

function MyComponent() {
  const [data, setData] = useState();
  
  useEffect() => {
     const data = fetchSync('...');
     setData(data)
  }, [])
  
  return <div>{data...}</div>
}

✅

function MyComponent() {
  const data = fetchSync('...');

  return <div>{data...}</div>
}

---

fetchSync conditional

function MyComponent({x}) {
  let data = null;
  if (x) {
   data = fetchSync('...');
  }

  return data && <div>{data...}</div>
}

---

fetchSync within JSX

function MyComponent() {
  return <div>{fetchSync('...')}</div>
}

---

fetchSync within a loop

function MyComponent() {
  const handles = ['handle-a', 'handle-b', ..].map((handle) => {
    return fetchSync(`../${handle}`)
  })
  
  return {handles.length ? handles.map((product) => ...) : null

[davidhousedev]

Love the idea!

A few things that may be worth covering from an eslint perspective, if any of these are disallowed:

• Can fetchSync be called conditionally, within a function body?
• Can fetchSync be called in JSX? e.g. return <div>{fetchSync('...')}</div>
• Can fetchSync be called within a loop?

[juanpprieto]

Thanks @davidhousedev 👍🏼!

I'd love to gather a list for fetchSync and also for useQuery and useShopQuery.

Keep them coming here 🙏🏼