Hooks as addition to Cells

Get Involved
1

Hi,
I am currently testing redwood and checking out its structure. I have an existing project, where I try to fetch data via hooks, which allows me to separate the data fetching from my client app.

// simple example
const useProject = (id) => useReactQuery(....) or useFirebase or whatever
const MyComp = ()=>{ 
const project = useProject(1) 
return <div>{project}</div>
}

Now in redwood it seems, I would need to place Cells within my existing client app at those places, where I need data.
That made me think about rather using hooks instead of Cells in redwood. Redwood could become kind of “headless”, since it would only handle routing, maybe a bit of layouting, but data fetching (probably all crud operations) would be done through hooks. React-Query could probably do this easily with its caching mechanims or is this actually already possible via apollo and just needs proper generators?
If I want to seperate concerns in my client app, I could also wrap a cell within my own component the way I would do it with hooks, but it is actually much more inconvenient.

// simple example - pseudo code
const GetProject = () => <ProjectCell ....>
<ContectProvider value={projectData}>
{children}
<ContextProvider />
</ProjectCell>
const MyCompWithinGetProject = ()=>{ 
const project = useProjectContext(1) 
return <div>{project}</div
}

The hook approach allows me to do the query within a component, the cell approach requires me to do it within a parent component.
Are there existing patterns to use hooks for fetching instead of cells?

2

What Cells help you with here is handling loading, failure states and an empty response.

Cells use a hook behind the scenes. To get something close to what cells give you you’d have to do something like this

const { error, loading, data } = useProject(1)

if (error) {
  return <Failure error={error} />
} else if (loading) {
  return <Loading />
} else if (data) {
  if (isEmpty(data)) {
    return <Empty />
  } else {
    return <Success {...data} />
  }
} else {
  throw 'Cannot render Cell: graphQL success but `data` is null'
}
3

Exactly! This is what react-query is doing i.e…

I guess you mean this hook

I see that the advantage of a Cell lies also in its functionality to prerender and before and afterQuery.
It would be nice to not only generate the cells but an optional hook. That could have the same functionalities as a cell with a simple import:

import ProjectsCell, {useProjects} from 'src/components/ProjectsCell'

Looking at the code I assume it should be possible to have the before and afterQuery, too.
This way I could seperate the rendering logic from the query logic.

( Also found this thread now showing redwood and relay mainly using hooks: Example App of Redwood with Relay - #4 by orta )

4

Yes, exactly! And there is nothing stopping you from using it directly. Just import it from @redwoodjs/web

1 Like
5

Nice thanks! True…

import {useQuery} from "@redwoodjs/web"
const QUERY.....
export useProjects = (options) => useQuery(QUERY, options)