# Ionic React Sqlite **URL:** \ **Category:** Ionic React\ **Created:** [July 5, 2023, 9:50pm UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671 "2023-07-05T21:50:43Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\ **Post date:** [July 5, 2023, 9:50pm UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671/1 "2023-07-05T21:50:44Z")
I delve into integrating the Capacitor SQLite plugin with Ionic and React. I share my experience with the plugin’s documentation and sample applications and explain why I used simple API calls instead of React hooks. I also provide insights into the installation process, including using the Ionic Visual Studio Code plugin and copying the SQL Wasm file. If you’re interested in making the plugin work on the web, I also cover that topic. So, join me as we explore the ins and outs of integrating the Capacitor SQLite plugin with Ionic and React! Don’t forget to like, subscribe, and let’s get started! - **Project Source Code** - [aaronksaunders/ionic7-react-sqlite (github.com)](https://github.com/aaronksaunders/ionic7-react-sqlite) - **Using the capacitor community plugin** : [capacitor-community/sqlite: Community plugin for native & electron SQLite databases (github.com)](https://github.com/capacitor-community/sqlite) [![](https://global.discourse-cdn.com/ionicframework/original/3X/b/0/b0b84d416115ce15d095a2cadb124ddaafc783d4.jpeg "Ionic React SQLite - Working With Ionic Framework And Capacitor") ](https://www.youtube.com/watch?v=tixvx5nsJO8) ---
**Author:** ![DorKeinath](https://avatars.discourse-cdn.com/v4/letter/d/b2d939/32.png) [@DorKeinath](https://forum.ionicframework.com/u/DorKeinath)\ **Post date:** [December 20, 2023, 12:41am UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671/2 "2023-12-20T00:41:29Z")
```auto const loadData = async () => { try { // query db performSQLAction(async (db: SQLiteDBConnection | undefined) => { const respSelect = await db?.query(`SELECT * FROM test`); setItems(respSelect?.values); // Not working log: console.log(`items:`, {items}); ``` If I log the `items` now, it shows me “empty”. But that’s not true. The log seems to be set to early. How can I log the items correctly _after_ the await for the query? ---
**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\ **Post date:** [December 20, 2023, 1:08am UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671/3 "2023-12-20T01:08:42Z")
You could add a useEffects that has a dependency on the state variable, when the update is completed it will trigger the useEffect to log the change ---
**Author:** ![DorKeinath](https://avatars.discourse-cdn.com/v4/letter/d/b2d939/32.png) [@DorKeinath](https://forum.ionicframework.com/u/DorKeinath)\ **Post date:** [March 14, 2024, 9:24pm UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671/4 "2024-03-14T21:24:22Z")
Thank you for this answer, it works! But I’ve got a problem, if I want to load Data and want to use this data directly afterwards. Do you have a hint for this as well? Even if I use Promis.all it sets too early and so to an empty array. ``` useEffect(() => { const fetchData = async () => { const fetchDataPromises = [ loadData() ]; await Promise.all(fetchDataPromises); setNewListItems([...items]); } fetchData(); }, [appDataReady]); ``` ---
**Author:** ![ptmkenny](https://avatars.discourse-cdn.com/v4/letter/p/ea666f/32.png) [@ptmkenny](https://forum.ionicframework.com/u/ptmkenny)\ **Post date:** [March 17, 2024, 10:51am UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671/5 "2024-03-17T10:51:13Z")
[react-query](https://tanstack.com/query/latest/docs/framework/react/overview) and suspense is great for this. I am loading data from a database all over my app, and setting up useEffect all the time is really a pain. react-query makes it easy to load data and cache it intelligently. The useQuery() hook has statuses like isLoading isPending and so on, which make it easy to work with. ---
**Author:** ![akshar2001](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@akshar2001](https://forum.ionicframework.com/u/akshar2001)\ **Post date:** [May 27, 2024, 5:13am UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671/6 "2024-05-27T05:13:34Z")
Hi, I am also building a app for android were I am storing the data in SQLite DB, and I also want to integrate react-query to it, for performance improvement. ---
**Author:** ![ptmkenny](https://avatars.discourse-cdn.com/v4/letter/p/ea666f/32.png) [@ptmkenny](https://forum.ionicframework.com/u/ptmkenny)\ **Post date:** [May 27, 2024, 5:33am UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671/7 "2024-05-27T05:33:15Z")
react-query has a [beta for Angular query.](https://tanstack.com/query/latest/docs/framework/angular/overview) ---
**Author:** ![robingenz](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/robingenz/32/144137_2.png) [@robingenz](https://forum.ionicframework.com/u/robingenz)\ **Post date:** [May 27, 2024, 12:07pm UTC](https://forum.ionicframework.com/t/ionic-react-sqlite/234671/8 "2024-05-27T12:07:19Z")
Yes, and I can highly recommend it. I use it myself for [Ionstarter](https://ionstarter.dev/products/angular-sqlite-starter) in combination with SQLite and am very happy with it.