feat: add react-query support

[hadichahine]

Note: This one required omitting the +data.ts file that comes from upstream packages. This also means the ToDoList component had to be slightly rewritten. We can try breaking down the component at the react boilerplate level for better overridability, but we will end up with a chopped up boilerplate (Multiple files for one simple thing).

[magne4000]

I'm not sure to understand why the Todo part had to be rewritten. After quickly reviewing it, I would assume that it could be merged in boilerplates/react/files/pages/todo

[hadichahine]

I'm not sure to understand why the Todo part had to be rewritten. After quickly reviewing it, I would assume that it could be merged in boilerplates/react/files/pages/todo

umh because the one we have already uses useData. That's what I recall. Didn't check the file.

[magne4000]

You can keep the !+data.ts, but you should try to merge other ts and tsx files directly into React (to avoid duplication).
Also the CI is failing.

[hadichahine]

You can keep the !+data.ts, but you should try to merge other ts and tsx files directly into React (to avoid duplication). Also the CI is failing.

I duplicated TodoList because the original one uses useData which is not really required when using react-query. We ought to use useSuspenseQuery. I can refactor TodoListView out of the react component (View Model) and the loading logic (remains in TodoList) will be overriden.

What do you think? Should we keep the file inside react?

[magne4000]

I duplicated TodoList because the original one uses useData

It should not be an issue. When code is compiled by Bati, unused imports are removed.
You can also remove the following blocks like this:

//# !BATI.has("react-query")
const { todoItemsInitial } = useData<Data>();
//# !BATI.has("react-query")
const [todoItems, setTodoItems] = useState<{ text: string }[]>(todoItemsInitial);
//# !BATI.has("react-query")
const [newTodo, setNewTodo] = useState("");

And with react-query code added inside if (BATI.has("react-query")) ... blocks, you should be able to do everything in the react boilerplate.