{"id":3813,"date":"2021-09-02T15:26:04","date_gmt":"2021-09-02T15:26:04","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3813"},"modified":"2021-10-05T15:59:08","modified_gmt":"2021-10-05T15:59:08","slug":"ionic-react-and-realm","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-react-and-realm","title":{"rendered":"Ionic React and Realm"},"content":{"rendered":"

Building an app these days often requires some kind of data layer, whether storing data locally using LocalStorage or using some remote database solution. In this blog post, we will look at Realm, from MongoDB, as our storage solution for our web app and discover how we can start to make use of it in an Ionic React app, with either GraphQL or direct DB operations. But before we look at the code, let’s understand what Realm is and how it relates to MongoDB.<\/p>\n

<\/p>\n

What Is Realm?<\/h2>\n

In the simplest terms, Realm is a platform made up of two parts. One is a local database solution for mobile that is an alternative to using something like SQLite. Realm will store the data locally on the device, but also sync it back with a MongoDB Atlas instance. Realm also offers a hosted application service that can handle data syncing across clients, as well as serverless functions for actions like authentication.<\/p>\n

For the Web SDK, Realm makes heavy use of the Atlas data layer. Instead of interacting with a local store, all the read\/write operations are performed on the Atlas instance directly. Realm’s serverless functions are still used for actions like authentication and user management.<\/p>\n

In our app, we’ll use Ionic and React to interact with a Realm\/Atlas instance and make a quick task tracker app. There are some prerequisites involved, but the Mongo docs cover everything in this excellent page<\/a>. Following this tutorial will have you set up a free Atlas Database cluster and a free Realm hosted application.<\/p>\n

When your database and hosted app has been set up, you can clone the project below and play around with it.<\/p>\n

git clone https:\/\/github.com\/mhartington\/ionic-realm-demo\ncd ionic-realm-demo\n# Optionally check out the graphql-less version\ngit checkout graphql-less\nnpm install\nionic serve\n<\/code><\/pre>\n
With all the setup taken care of, let’s actually build something.<\/p>\n
Accessing Realm From Your App<\/h2>\n
To start accessing Realm in your app, we first must make sure the Realm instance is available. To do so, we’re going to make use of React’s Context API and hooks. In the src<\/code> directory, there is a Realm.tsx<\/code> file, let’s open that up.<\/p>\n
import { createContext, useContext, useEffect, useState } from 'react';\nimport * as Realm from 'realm-web';\n\nconst RealmAppContext = createContext<Partial<Realm.App>>({});\n\nexport const useRealmApp = () => {\n  const app = useContext(RealmAppContext);\n  if (!app) {\n    throw new Error( `You must call useRealmApp() inside of a <RealmAppProvider \/>`);\n  }\n  return app;\n};\n\nexport const RealmAppProvider = ({ appId, children, }: { appId: any; children: JSX.Element; }) => {\n  const [app, setApp] = useState(new Realm.App(appId));\n  const [currentUser, setCurrentUser] = useState(app.currentUser);\n\n  useEffect(() => {\n    setApp(new Realm.App(appId));\n  }, [appId]);\n\n  const logIn = async (credentials: Realm.Credentials<any>) => {\n    const user = await app.logIn(credentials);\n    setCurrentUser(app.currentUser);\n    return user;\n  };\n  const logOut = async () => {\n    await app.currentUser?.logOut();\n    setCurrentUser(app.currentUser);\n  };\n\n  const wrapped = { ...app, currentUser, logIn, logOut };\n  return (\n    <RealmAppContext.Provider value={wrapped}>\n      {children}\n    <\/RealmAppContext.Provider>\n  );\n};\n<\/code><\/pre>\n
While this may seem like a lot, the basics of what is happening here can be broken down into three parts:<\/p>\n