├── .gitignore ├── packages ├── parse-react-ssr │ ├── .gitignore │ ├── tsconfig.json │ ├── package.json │ ├── LICENSE │ ├── README.md │ ├── src │ │ └── index.ts │ └── package-lock.json ├── parse-react │ ├── .gitignore │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── package.json │ ├── LICENSE │ ├── README.md │ └── package-lock.json ├── parse-react-base │ ├── .gitignore │ ├── src │ │ ├── index.ts │ │ ├── util.ts │ │ └── useParseQuery.ts │ ├── tsconfig.json │ ├── package-lock.json │ ├── LICENSE │ ├── package.json │ └── README.md └── parse-react-native │ ├── .gitignore │ ├── src │ └── index.ts │ ├── tsconfig.json │ ├── LICENSE │ ├── package.json │ ├── package-lock.json │ └── README.md ├── examples ├── react-ts-todo │ ├── src │ │ ├── react-app-env.d.ts │ │ ├── setupTests.ts │ │ ├── App.test.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── App.css │ │ ├── App.tsx │ │ ├── logo.svg │ │ └── serviceWorker.ts │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ └── package.json ├── react-native-ts-todo │ ├── assets │ │ ├── icon.png │ │ ├── splash.png │ │ ├── favicon.png │ │ └── adaptive-icon.png │ ├── babel.config.js │ ├── .expo-shared │ │ └── assets.json │ ├── .gitignore │ ├── tsconfig.json │ ├── app.json │ ├── README.md │ ├── package.json │ └── App.tsx ├── next-ts-todo │ ├── public │ │ └── favicon-32x32.png │ ├── next-env.d.ts │ ├── pages │ │ ├── _app.tsx │ │ ├── no-ssr.tsx │ │ └── index.tsx │ ├── .gitignore │ ├── tsconfig.json │ ├── README.md │ ├── package.json │ └── package-lock.json └── backend-todo │ ├── parse-dashboard-config.json │ ├── parse-server-config.json │ ├── package.json │ └── README.md ├── lerna.json ├── .github └── workflows │ └── prerelease.yml ├── LICENSE ├── lerna-debug.log ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | logs 3 | -------------------------------------------------------------------------------- /packages/parse-react-ssr/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | -------------------------------------------------------------------------------- /packages/parse-react/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | -------------------------------------------------------------------------------- /packages/parse-react-base/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | -------------------------------------------------------------------------------- /packages/parse-react-native/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | -------------------------------------------------------------------------------- /examples/react-ts-todo/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/react-ts-todo/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*", 4 | "examples/*" 5 | ], 6 | "version": "0.0.1-alpha.18" 7 | } 8 | -------------------------------------------------------------------------------- /packages/parse-react-base/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useParseQuery'; 2 | export { default as useParseQuery } from './useParseQuery'; 3 | -------------------------------------------------------------------------------- /examples/react-ts-todo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parse-community/parse-react/HEAD/examples/react-ts-todo/public/favicon.ico -------------------------------------------------------------------------------- /examples/react-ts-todo/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parse-community/parse-react/HEAD/examples/react-ts-todo/public/logo192.png -------------------------------------------------------------------------------- /examples/react-ts-todo/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parse-community/parse-react/HEAD/examples/react-ts-todo/public/logo512.png -------------------------------------------------------------------------------- /examples/react-native-ts-todo/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parse-community/parse-react/HEAD/examples/react-native-ts-todo/assets/icon.png -------------------------------------------------------------------------------- /examples/next-ts-todo/public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parse-community/parse-react/HEAD/examples/next-ts-todo/public/favicon-32x32.png -------------------------------------------------------------------------------- /examples/react-native-ts-todo/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parse-community/parse-react/HEAD/examples/react-native-ts-todo/assets/splash.png -------------------------------------------------------------------------------- /examples/react-native-ts-todo/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parse-community/parse-react/HEAD/examples/react-native-ts-todo/assets/favicon.png -------------------------------------------------------------------------------- /examples/react-native-ts-todo/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parse-community/parse-react/HEAD/examples/react-native-ts-todo/assets/adaptive-icon.png -------------------------------------------------------------------------------- /examples/react-native-ts-todo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /examples/react-native-ts-todo/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /examples/react-native-ts-todo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /examples/next-ts-todo/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /examples/next-ts-todo/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import 'bootstrap/dist/css/bootstrap.min.css'; 2 | 3 | if (typeof window !== 'undefined') { 4 | import('bootstrap'); 5 | } 6 | 7 | function MyApp({ Component, pageProps }) { 8 | return 9 | } 10 | 11 | export default MyApp 12 | -------------------------------------------------------------------------------- /examples/backend-todo/parse-dashboard-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "apps": [ 3 | { 4 | "serverURL": "http://localhost:1337/parse", 5 | "appId": "APPLICATION_ID", 6 | "masterKey": "MASTER_KEY", 7 | "javascriptKey": "JAVASCRIPT_KEY", 8 | "appName": "Todo" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /examples/react-ts-todo/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | -------------------------------------------------------------------------------- /examples/react-native-ts-todo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "jsx": "react-native", 5 | "lib": ["dom", "esnext"], 6 | "moduleResolution": "node", 7 | "noEmit": true, 8 | "skipLibCheck": true, 9 | "resolveJsonModule": true, 10 | "strict": true 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/react-ts-todo/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/backend-todo/parse-server-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "APPLICATION_ID", 3 | "masterKey": "MASTER_KEY", 4 | "clientKey": "CLIENT_KEY", 5 | "javascriptKey": "JAVASCRIPT_KEY", 6 | "databaseURI": "mongodb://localhost/test", 7 | "startLiveQueryServer": true, 8 | "liveQuery": { 9 | "classNames": [ 10 | "Todo" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /packages/parse-react/src/index.ts: -------------------------------------------------------------------------------- 1 | import Parse from 'parse'; 2 | 3 | global.Parse = Parse; 4 | 5 | export * from '@parse/react-base'; 6 | 7 | export const initializeParse = (serverURL: string, applicationId: string, javascriptKey: string) => { 8 | Parse.serverURL = serverURL; 9 | Parse.initialize(applicationId, javascriptKey); 10 | Parse.enableLocalDatastore(); 11 | }; 12 | -------------------------------------------------------------------------------- /examples/react-ts-todo/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /examples/react-ts-todo/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /packages/parse-react-native/src/index.ts: -------------------------------------------------------------------------------- 1 | import Parse from 'parse/react-native.js'; 2 | import AsyncStorage from '@react-native-async-storage/async-storage'; 3 | 4 | global.Parse = Parse; 5 | 6 | export * from '@parse/react-base'; 7 | 8 | export const initializeParse = (serverURL: string, applicationId: string, javascriptKey: string) => { 9 | Parse.setAsyncStorage(AsyncStorage); 10 | Parse.serverURL = serverURL; 11 | Parse.initialize(applicationId, javascriptKey); 12 | Parse.enableLocalDatastore(); 13 | }; 14 | -------------------------------------------------------------------------------- /examples/next-ts-todo/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /examples/backend-todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend-todo", 3 | "private": true, 4 | "scripts": { 5 | "start-mongodb-runner": "mongodb-runner start", 6 | "start-parse-server": "parse-server ./parse-server-config.json", 7 | "start-parse-dashboard": "parse-dashboard --config ./parse-dashboard-config.json", 8 | "start": "npm run start-mongodb-runner && (npm run start-parse-server & npm run start-parse-dashboard)", 9 | "dev": "npm run start" 10 | }, 11 | "devDependencies": { 12 | "mongodb-runner": "4.8.1", 13 | "parse-dashboard": "3.2.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/react-ts-todo/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /examples/react-ts-todo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples/react-ts-todo/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /examples/next-ts-todo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": false, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve" 20 | }, 21 | "include": [ 22 | "next-env.d.ts", 23 | "**/*.ts", 24 | "**/*.tsx" 25 | ], 26 | "exclude": [ 27 | "node_modules" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /packages/parse-react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true, 18 | "skipLibCheck": true, 19 | "forceConsistentCasingInFileNames": true, 20 | "allowSyntheticDefaultImports": true, 21 | "isolatedModules": true, 22 | "outDir": "./dist" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/parse-react-base/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src"], 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "lib": ["esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true, 18 | "skipLibCheck": true, 19 | "forceConsistentCasingInFileNames": true, 20 | "allowSyntheticDefaultImports": true, 21 | "isolatedModules": true, 22 | "outDir": "./dist" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/parse-react-native/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true, 18 | "skipLibCheck": true, 19 | "forceConsistentCasingInFileNames": true, 20 | "allowSyntheticDefaultImports": true, 21 | "isolatedModules": true, 22 | "outDir": "./dist" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.github/workflows/prerelease.yml: -------------------------------------------------------------------------------- 1 | name: prerelease 2 | on: 3 | push: 4 | branches: [master] 5 | jobs: 6 | prerelease: 7 | runs-on: ubuntu-20.04 8 | steps: 9 | - uses: actions/checkout@v2 10 | with: 11 | fetch-depth: "0" 12 | - name: Configure CI Git User 13 | run: | 14 | git config --global user.email "admin@parseplatform.org" 15 | git config --global user.name "Parse Community" 16 | - uses: actions/setup-node@v1 17 | with: 18 | node-version: 12 19 | - run: npm ci 20 | - run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc 21 | env: 22 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 23 | - run: npm run prerelease 24 | -------------------------------------------------------------------------------- /examples/react-ts-todo/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/parse-react-ssr/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./src"], 3 | "compilerOptions": { 4 | "module": "commonjs", 5 | "lib": [ 6 | "esnext", 7 | "dom" 8 | ], 9 | "importHelpers": true, 10 | "declaration": true, 11 | "sourceMap": true, 12 | "rootDir": "./src", 13 | "strict": true, 14 | "noImplicitReturns": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "moduleResolution": "node", 19 | "jsx": "react", 20 | "esModuleInterop": true, 21 | "skipLibCheck": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "allowSyntheticDefaultImports": true, 24 | "isolatedModules": true, 25 | "outDir": "./dist" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/react-native-ts-todo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "react-native-ts-todo", 4 | "slug": "react-native-ts-todo", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "android": { 23 | "adaptiveIcon": { 24 | "foregroundImage": "./assets/adaptive-icon.png", 25 | "backgroundColor": "#FFFFFF" 26 | } 27 | }, 28 | "web": { 29 | "favicon": "./assets/favicon.png" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/next-ts-todo/README.md: -------------------------------------------------------------------------------- 1 | # Todo List Example for Next.js (TS) 2 | 3 | A Todo List Example app built using Next.js and Typescript to illustrate the usage of the [@parse/react-ssr](https://github.com/parse-community/parse-react/tree/master/packages/parse-react-ssr) library connecting to a Parse backend. 4 | 5 | ## Running this example 6 | 7 | 1. Clone this repository: 8 | 9 | ```shell 10 | git clone git@github.com:parse-community/parse-react.git 11 | cd parse-react 12 | ``` 13 | 14 | 2. Install the dependencies: 15 | 16 | ```shell 17 | npm install 18 | ``` 19 | 20 | 3. Run the example backend, and the example app: 21 | 22 | ```shell 23 | npm run dev-backend-todo & npm run dev-next-ts-todo 24 | ``` 25 | 26 | After running the commands, use your web browser to open the example app at http://localhost:3031/. The example backend can be accessed using the Parse Dashboard at http://0.0.0.0:4040/. 27 | -------------------------------------------------------------------------------- /packages/parse-react-base/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@parse/react-base", 3 | "version": "0.0.1-alpha.18", 4 | "lockfileVersion": 2, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "@parse/react-base", 9 | "version": "0.0.1-alpha.16", 10 | "license": "MIT", 11 | "dependencies": { 12 | "tslib": "2.3.1" 13 | } 14 | }, 15 | "node_modules/tslib": { 16 | "version": "2.3.1", 17 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", 18 | "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" 19 | } 20 | }, 21 | "dependencies": { 22 | "tslib": { 23 | "version": "2.3.1", 24 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", 25 | "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==" 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/react-ts-todo/README.md: -------------------------------------------------------------------------------- 1 | # Todo List Example for React (TS) 2 | 3 | A Todo List Example app built using React and Typescript to illustrate the usage of the [@parse/react](https://github.com/parse-community/parse-react/tree/master/packages/parse-react) library connecting to a Parse backend. 4 | 5 | ## Running this example 6 | 7 | 1. Clone this repository: 8 | 9 | ```shell 10 | git clone git@github.com:parse-community/parse-react.git 11 | cd parse-react 12 | ``` 13 | 14 | 2. Install the dependencies: 15 | 16 | ```shell 17 | npm install 18 | ``` 19 | 20 | 3. Run the example backend, and the example app: 21 | 22 | ```shell 23 | npm run dev-backend-todo & npm run dev-react-ts-todo 24 | ``` 25 | 26 | After running the commands, your default web browser should automatically open the example app at http://localhost:3000/. The example backend can be accessed using the Parse Dashboard at http://0.0.0.0:4040/. 27 | -------------------------------------------------------------------------------- /examples/react-native-ts-todo/README.md: -------------------------------------------------------------------------------- 1 | # Todo List Example for React Native (TS) 2 | 3 | A Todo List Example app built using React Native and Typescript to illustrate the usage of the [@parse/react-native](https://github.com/parse-community/parse-react/tree/master/packages/parse-react-native) library connecting to a Parse backend. 4 | 5 | ## Running this example 6 | 7 | 1. Clone this repository: 8 | 9 | ```shell 10 | git clone git@github.com:parse-community/parse-react.git 11 | cd parse-react 12 | ``` 13 | 14 | 2. Install the dependencies: 15 | 16 | ```shell 17 | npm install 18 | ``` 19 | 20 | 3. Run the example backend, and the example app: 21 | 22 | ```shell 23 | npm run dev-backend-todo & npm run dev-react-native-ts-todo 24 | ``` 25 | 26 | This example uses Expo. After running the commands, follow the Expo instructions printed in your console to open the example app in an Android, iOS, or Web emulator/device. The example backend can be accessed using the Parse Dashboard at http://0.0.0.0:4040/. 27 | -------------------------------------------------------------------------------- /packages/parse-react-base/src/util.ts: -------------------------------------------------------------------------------- 1 | export const compareParseObjects = >( 2 | a: T, 3 | b: T, 4 | sorts: string[] 5 | ): number => { 6 | let order = sorts[0]; 7 | const operator = order.slice(0, 1); 8 | const isDescending = operator === '-'; 9 | if (isDescending) { 10 | order = order.substring(1); 11 | } 12 | if (order === '_created_at') { 13 | order = 'createdAt'; 14 | } 15 | if (order === '_updated_at') { 16 | order = 'updatedAt'; 17 | } 18 | if (!(/^[A-Za-z][0-9A-Za-z_]*$/).test(order) || order === 'password') { 19 | throw new Parse.Error(Parse.Error.INVALID_KEY_NAME, `Invalid Key: ${order}`); 20 | } 21 | const field1 = a.get(order); 22 | const field2 = b.get(order); 23 | if (field1 < field2) { 24 | return isDescending ? 1 : -1; 25 | } 26 | if (field1 > field2) { 27 | return isDescending ? -1 : 1; 28 | } 29 | if (sorts.length > 1) { 30 | const remainingSorts = sorts.slice(1); 31 | return compareParseObjects(a, b, remainingSorts); 32 | } 33 | return 0; 34 | }; 35 | -------------------------------------------------------------------------------- /packages/parse-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@parse/react", 3 | "version": "0.0.1-alpha.18", 4 | "publishConfig": { 5 | "access": "public" 6 | }, 7 | "author": "Parse Community ", 8 | "description": "An experimental package that provides you easy, real-time, offline-first interaction with the powerful Parse Server backend from your React applications.", 9 | "keywords": [ 10 | "react", 11 | "parse" 12 | ], 13 | "homepage": "https://parseplatform.org", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/parse-community/parse-react", 17 | "directory": "packages/react" 18 | }, 19 | "bugs": "https://github.com/parse-community/parse-react/issues", 20 | "license": "MIT", 21 | "main": "dist/index.js", 22 | "types": "dist/index.d.ts", 23 | "files": [ 24 | "dist" 25 | ], 26 | "scripts": { 27 | "dev": "tsc --build ./tsconfig.json --watch", 28 | "build": "tsc --build ./tsconfig.json" 29 | }, 30 | "dependencies": { 31 | "@parse/react-base": "^0.0.1-alpha.18" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/parse-react-ssr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@parse/react-ssr", 3 | "version": "0.0.1-alpha.18", 4 | "publishConfig": { 5 | "access": "public" 6 | }, 7 | "author": "Parse Community ", 8 | "description": "An experimental package that provides you easy, real-time, offline-first interaction with the powerful Parse Server backend from your React with SSR applications (e.g. Next.js).", 9 | "keywords": [ 10 | "react", 11 | "parse" 12 | ], 13 | "homepage": "https://parseplatform.org", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/parse-community/parse-react", 17 | "directory": "packages/react-ssr" 18 | }, 19 | "bugs": "https://github.com/parse-community/parse-react/issues", 20 | "license": "MIT", 21 | "main": "dist/index.js", 22 | "types": "dist/index.d.ts", 23 | "files": [ 24 | "dist" 25 | ], 26 | "scripts": { 27 | "dev": "tsc --build ./tsconfig.json --watch", 28 | "build": "tsc --build ./tsconfig.json" 29 | }, 30 | "dependencies": { 31 | "@parse/react-base": "^0.0.1-alpha.18" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Parse Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/backend-todo/README.md: -------------------------------------------------------------------------------- 1 | # Backend for Todo List Examples 2 | 3 | This is the Parse Server backend for the Todo List examples within this monorepo. 4 | 5 | ## Running this example backend and the example apps 6 | 7 | 1. Clone this repository: 8 | 9 | ```shell 10 | git clone git@github.com:parse-community/parse-react.git 11 | cd parse-react 12 | ``` 13 | 14 | 2. Install the dependencies: 15 | 16 | ```shell 17 | npm install 18 | ``` 19 | 20 | 3. Run the example backend: 21 | 22 | ```shell 23 | npm run dev-backend-todo 24 | ``` 25 | 26 | 4. Run the example apps in different terminals: 27 | 28 | - React (TS) App ([Learn more](https://github.com/parse-community/parse-react/tree/master/examples/react-ts-todo)) 29 | 30 | ```shell 31 | npm run dev-react-ts-todo 32 | ``` 33 | 34 | - React Native (TS) App ([Learn more](https://github.com/parse-community/parse-react/tree/master/examples/react-native-ts-todo)) 35 | 36 | ```shell 37 | npm run dev-react-native-ts-todo 38 | ``` 39 | 40 | - Next.js (TS) App ([Learn more](https://github.com/parse-community/parse-react/tree/master/examples/next-ts-todo)) 41 | 42 | ```shell 43 | npm run dev-next-ts-todo 44 | ``` 45 | -------------------------------------------------------------------------------- /packages/parse-react/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Parse Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/parse-react-base/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Parse Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/parse-react-native/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Parse Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/parse-react-ssr/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Parse Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/parse-react-native/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@parse/react-native", 3 | "version": "0.0.1-alpha.18", 4 | "publishConfig": { 5 | "access": "public" 6 | }, 7 | "author": "Parse Community ", 8 | "description": "An experimental package that provides you easy, real-time, offline-first interaction with the powerful Parse Server backend from your React Native applications.", 9 | "keywords": [ 10 | "react native", 11 | "parse" 12 | ], 13 | "homepage": "https://parseplatform.org", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/parse-community/parse-react", 17 | "directory": "packages/react-native" 18 | }, 19 | "bugs": "https://github.com/parse-community/parse-react/issues", 20 | "license": "MIT", 21 | "main": "dist/index.js", 22 | "types": "dist/index.d.ts", 23 | "files": [ 24 | "dist" 25 | ], 26 | "scripts": { 27 | "dev": "tsc --build ./tsconfig.json --watch", 28 | "build": "tsc --build ./tsconfig.json" 29 | }, 30 | "dependencies": { 31 | "@parse/react-base": "^0.0.1-alpha.18", 32 | "@react-native-async-storage/async-storage": "1.15.4" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /examples/react-ts-todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-ts-todo", 3 | "private": true, 4 | "dependencies": { 5 | "@parse/react": "0.0.1-alpha.14", 6 | "@testing-library/jest-dom": "4.2.4", 7 | "@testing-library/react": "9.5.0", 8 | "@testing-library/user-event": "7.2.1", 9 | "@types/jest": "24.9.1", 10 | "@types/node": "12.19.1", 11 | "@types/parse": "2.18.12", 12 | "@types/react": "16.9.53", 13 | "@types/react-dom": "16.9.8", 14 | "parse": "3.3.1", 15 | "react": "17.0.1", 16 | "react-dom": "17.0.1", 17 | "react-scripts": "3.4.4", 18 | "typescript": "3.7.5" 19 | }, 20 | "scripts": { 21 | "start": "CI=true react-scripts start", 22 | "build": "react-scripts build", 23 | "test": "react-scripts test", 24 | "eject": "react-scripts eject", 25 | "dev": "npm run start" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /examples/next-ts-todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-ts-todo", 3 | "private": true, 4 | "scripts": { 5 | "cp-parse-react-ssr": "rm -rf ./node_modules/@parse/react-ssr-temp && mkdir -p ./node_modules/@parse/react-ssr-temp && cp -r ./node_modules/@parse/react-ssr/* ./node_modules/@parse/react-ssr-temp/ && rm -rf ./node_modules/@parse/react-ssr && mv ./node_modules/@parse/react-ssr-temp ./node_modules/@parse/react-ssr", 6 | "postinstall": "npm run cp-parse-react-ssr", 7 | "watch-parse-react-ssr": "watch 'cp -r ../../packages/parse-react-ssr/dist/* ./node_modules/@parse/react-ssr/dist/' ../../packages/parse-react-ssr/dist/", 8 | "dev": "npm run watch-parse-react-ssr & next dev -p 3031", 9 | "build": "next build", 10 | "start": "next start -p 3031" 11 | }, 12 | "dependencies": { 13 | "@parse/react-ssr": "0.0.1-alpha.14", 14 | "bootstrap": "4.6.0", 15 | "jquery": "3.6.0", 16 | "next": "12.1.0", 17 | "parse": "3.3.1", 18 | "popper.js": "1.16.1", 19 | "react": "17.0.2", 20 | "react-dom": "17.0.2", 21 | "tslib": "2.3.1" 22 | }, 23 | "devDependencies": { 24 | "@types/react": "17.0.29", 25 | "typescript": "4.4.4", 26 | "watch": "1.0.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/parse-react-base/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@parse/react-base", 3 | "version": "0.0.1-alpha.18", 4 | "publishConfig": { 5 | "access": "public" 6 | }, 7 | "author": "Parse Community ", 8 | "description": "An experimental base implementation to support the specialized packages for React, React Native, and React with SSR (e.g. Next.js) applications. These packages provide you easy, real-time, offline-first interaction with the powerful Parse Server backend.", 9 | "keywords": [ 10 | "react", 11 | "react native", 12 | "ssr", 13 | "next.js", 14 | "parse" 15 | ], 16 | "homepage": "https://parseplatform.org", 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/parse-community/parse-react", 20 | "directory": "packages/react-base" 21 | }, 22 | "bugs": "https://github.com/parse-community/parse-react/issues", 23 | "license": "MIT", 24 | "main": "dist/index.js", 25 | "types": "dist/index.d.ts", 26 | "files": [ 27 | "dist" 28 | ], 29 | "scripts": { 30 | "dev": "tsc --build ./tsconfig.json --watch", 31 | "build": "tsc --build ./tsconfig.json" 32 | }, 33 | "dependencies": { 34 | "tslib": "2.3.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/parse-react-base/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Parse Platform 4 | 5 |

6 | 7 |

@parse/react-base (alpha)

8 | 9 |

10 | An experimental base implementation to support the specialized packages for React, React Native, and React with SSR (e.g. Next.js) applications. These packages provide you easy, real-time, offline-first interaction with the powerful Parse Server backend. 11 |

12 | 13 |

14 | 15 | NPM Version 16 | 17 |

18 | 19 |
20 | 21 | This is a base implementation and not intended to be used directly. Please use one of the specialized packages for: 22 | - [React](https://github.com/parse-community/parse-react/tree/master/packages/parse-react) 23 | - [React Native](https://github.com/parse-community/parse-react/tree/master/packages/parse-react-native) 24 | - [React with SSR (e.g. Next.js)](https://github.com/parse-community/parse-react/tree/master/packages/parse-react-ssr) 25 | -------------------------------------------------------------------------------- /lerna-debug.log: -------------------------------------------------------------------------------- 1 | 0 silly argv { 2 | 0 silly argv _: [ 'add' ], 3 | 0 silly argv globs: [ './examples/next-ts-todo' ], 4 | 0 silly argv lernaVersion: '3.22.1', 5 | 0 silly argv '$0': 'lerna', 6 | 0 silly argv pkg: '@parse/react-ssr@next' 7 | 0 silly argv } 8 | 1 notice cli v3.22.1 9 | 2 verbose rootPath /Users/davimacedo/Projects/parse-react 10 | 3 error TypeError: Invalid comparator: next 11 | 3 error at Comparator.parse (/Users/davimacedo/Projects/parse-react/node_modules/semver/semver.js:794:11) 12 | 3 error at new Comparator (/Users/davimacedo/Projects/parse-react/node_modules/semver/semver.js:777:8) 13 | 3 error at Range. (/Users/davimacedo/Projects/parse-react/node_modules/semver/semver.js:975:12) 14 | 3 error at Array.map () 15 | 3 error at Range.parseRange (/Users/davimacedo/Projects/parse-react/node_modules/semver/semver.js:974:13) 16 | 3 error at Range. (/Users/davimacedo/Projects/parse-react/node_modules/semver/semver.js:917:17) 17 | 3 error at Array.map () 18 | 3 error at new Range (/Users/davimacedo/Projects/parse-react/node_modules/semver/semver.js:916:40) 19 | 3 error at Function.intersects (/Users/davimacedo/Projects/parse-react/node_modules/semver/semver.js:1543:8) 20 | 3 error at AddCommand.packageSatisfied (/Users/davimacedo/Projects/parse-react/node_modules/@lerna/add/index.js:226:19) 21 | 3 error at AddCommand.initialize (/Users/davimacedo/Projects/parse-react/node_modules/@lerna/add/index.js:41:31) 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "root", 3 | "private": true, 4 | "license": "MIT", 5 | "scripts": { 6 | "clean": "lerna clean --yes && rm -r node_modules", 7 | "bootstrap": "lerna bootstrap", 8 | "build": "lerna run build --scope '@parse/*' --stream", 9 | "postinstall": "npm run bootstrap && npm run build", 10 | "dev-parse-react-base": "lerna run dev --scope @parse/react-base --stream", 11 | "dev-parse-react": "lerna run dev --scope @parse/react --stream", 12 | "dev-parse-react-native": "lerna run dev --scope @parse/react-native --stream", 13 | "dev-parse-react-ssr": "lerna run dev --scope @parse/react-ssr --stream", 14 | "dev-packages": "lerna run dev --scope '@parse/*' --parallel --stream", 15 | "dev-backend-todo": "lerna run dev --scope backend-todo --stream", 16 | "dev-react-ts-todo": "lerna run dev --scope react-ts-todo --stream", 17 | "dev-react-native-ts-todo": "lerna run dev --scope react-native-ts-todo --stream", 18 | "dev-next-ts-todo": "lerna run dev --scope next-ts-todo --stream", 19 | "dev-examples": "lerna run dev --ignore '@parse/*' --parallel --stream", 20 | "dev": "npm run dev-packages & npm run dev-examples", 21 | "prerelease": "lerna publish prerelease --no-verify-access --yes" 22 | }, 23 | "devDependencies": { 24 | "@types/parse": "2.18.12", 25 | "@types/react": "17.0.29", 26 | "@types/react-native": "0.65.5", 27 | "lerna": "4.0.0", 28 | "parse": "3.3.1", 29 | "react": "17.0.2", 30 | "react-native": "0.66.0", 31 | "typescript": "4.4.4" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/react-native-ts-todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-ts-todo", 3 | "private": true, 4 | "main": "./node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "cp-parse-react-native": "rm -rf ./node_modules/@parse/react-native-temp && mkdir -p ./node_modules/@parse/react-native-temp && cp -r ./node_modules/@parse/react-native/* ./node_modules/@parse/react-native-temp/ && rm -rf ./node_modules/@parse/react-native && mv ./node_modules/@parse/react-native-temp ./node_modules/@parse/react-native", 7 | "postinstall": "npm run cp-parse-react-native", 8 | "watch-parse-react-native": "watch 'cp -r ../../packages/parse-react-native/dist/* ./node_modules/@parse/react-native/dist/' ../../packages/parse-react-native/dist/", 9 | "start": "npm run watch-parse-react-native & expo start", 10 | "android": "expo start --android", 11 | "ios": "expo start --ios", 12 | "web": "expo start --web", 13 | "eject": "expo eject", 14 | "dev": "npm run start" 15 | }, 16 | "dependencies": { 17 | "@parse/react-native": "0.0.1-alpha.15", 18 | "expo": "39.0.2", 19 | "expo-status-bar": "1.0.2", 20 | "parse": "3.3.1", 21 | "react": "16.13.1", 22 | "react-dom": "16.13.1", 23 | "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz", 24 | "react-native-web": "0.13.12" 25 | }, 26 | "devDependencies": { 27 | "@babel/core": "7.9.0", 28 | "@types/parse": "2.18.2", 29 | "@types/react": "16.9.35", 30 | "@types/react-dom": "16.9.8", 31 | "@types/react-native": "0.63.2", 32 | "typescript": "3.9.5" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Parse Platform 4 | 5 |

6 | 7 |

React, React Native, and React with SSR (e.g. Next.js) packages to interact with Parse Server backend (alpha)

8 | 9 |

10 | This monorepo (mono respository) contains experimental packages that provide you easy, real-time, offline-first interaction with the powerful Parse Server backend from your applications. 11 |

12 | 13 |
14 | 15 | This is a work in progress monorepo. Please let us know your feedback via issues and feel free to open a PR to improve code or documentation for any of the packages. 16 | 17 | ## Packages 18 | 19 | | Package | Name | Version 20 | |--------|-----|------------| 21 | | [React](https://github.com/parse-community/parse-react/tree/master/packages/parse-react) | [@parse/react](https://www.npmjs.com/package/@parse/react) | [![NPM Version](https://badge.fury.io/js/%40parse%2Freact.svg)](https://www.npmjs.com/package/@parse/react) | 22 | | [React Native](https://github.com/parse-community/parse-react/tree/master/packages/parse-react-native) | [@parse/react-native](https://www.npmjs.com/package/@parse/react-native) | [![NPM Version](https://badge.fury.io/js/%40parse%2Freact-native.svg)](https://www.npmjs.com/package/@parse/react-native) | 23 | | [React with SSR (e.g. Next.js)](https://github.com/parse-community/parse-react/tree/master/packages/parse-react-ssr) | [@parse/react-ssr](https://www.npmjs.com/package/@parse/react-ssr) | [![NPM Version](https://badge.fury.io/js/%40parse%2Freact-ssr.svg)](https://www.npmjs.com/package/@parse/react-ssr) | 24 | -------------------------------------------------------------------------------- /examples/react-ts-todo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /examples/react-ts-todo/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useMemo } from 'react'; 2 | import { initializeParse, useParseQuery } from '@parse/react'; 3 | import logo from './logo.svg'; 4 | import './App.css'; 5 | 6 | initializeParse( 7 | 'http://localhost:1337/parse', 8 | 'APPLICATION_ID', 9 | 'JAVASCRIPT_KEY' 10 | ); 11 | 12 | function App() { 13 | const [ 14 | hideDone, 15 | setHideDone 16 | ] = useState(false); 17 | 18 | const parseQuery = useMemo( 19 | () => { 20 | const parseQuery = new Parse.Query('Todo'); 21 | 22 | if (hideDone) { 23 | parseQuery.notEqualTo('done', true); 24 | } 25 | 26 | (parseQuery as any).withCount(); 27 | 28 | return parseQuery; 29 | }, 30 | [hideDone] 31 | ); 32 | 33 | const { 34 | isLive, 35 | isLoading, 36 | isSyncing, 37 | results, 38 | count, 39 | error, 40 | reload 41 | } = useParseQuery(parseQuery); 42 | 43 | return ( 44 |
45 |
46 | logo 47 | 52 | {isLoading && ( 53 |

Loading...

54 | )} 55 | {isLive && ( 56 |

Live!

57 | )} 58 | {isSyncing && ( 59 |

Syncing...

60 | )} 61 | {results && ( 62 |
    63 | {results.map(result => ( 64 |
  • 65 | {result.get('title')} 66 |
  • 67 | ))} 68 |
69 | )} 70 |

{count}

71 | {error && ( 72 |

{error.message}

73 | )} 74 | 79 |
80 |
81 | ); 82 | } 83 | 84 | export default App; 85 | -------------------------------------------------------------------------------- /examples/next-ts-todo/pages/no-ssr.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useCallback } from 'react'; 2 | import Head from 'next/head' 3 | import { initializeParse, encodeParseQuery, useParseQuery } from '@parse/react-ssr'; 4 | 5 | initializeParse( 6 | 'http://localhost:1337/parse', 7 | 'APPLICATION_ID', 8 | 'JAVASCRIPT_KEY' 9 | ); 10 | 11 | const createParseQuery = hideDone => { 12 | const parseQuery = new Parse.Query('Todo'); 13 | 14 | if (hideDone) { 15 | parseQuery.notEqualTo('done', true); 16 | } 17 | 18 | (parseQuery as any).withCount(); 19 | 20 | return parseQuery; 21 | }; 22 | 23 | export default function Home() { 24 | const [ 25 | { 26 | hideDone, 27 | parseQuery 28 | }, 29 | setParseQueryState 30 | ] = useState({ 31 | hideDone: false, 32 | parseQuery: createParseQuery(false) 33 | }); 34 | 35 | const toggleHideDone = useCallback( 36 | () => { 37 | setParseQueryState({ 38 | hideDone: !hideDone, 39 | parseQuery: createParseQuery(!hideDone) 40 | }); 41 | }, 42 | [hideDone] 43 | ); 44 | 45 | const { 46 | isLive, 47 | isLoading, 48 | isSyncing, 49 | results, 50 | count, 51 | error, 52 | reload 53 | } = useParseQuery(parseQuery); 54 | 55 | return ( 56 | <> 57 | 58 | Todo Example using @parse/ssr on Next.js (Typescript) 59 | 60 | 61 | 64 | {isLoading && ( 65 |

Loading...

66 | )} 67 | {isLive && ( 68 |

Live!

69 | )} 70 | {isSyncing && ( 71 |

Syncing...

72 | )} 73 | {results && ( 74 |
    75 | {results.map(result => ( 76 |
  • 77 | {result.get('title')} 78 |
  • 79 | ))} 80 |
81 | )} 82 |

{count}

83 | {error && ( 84 |

{error.message}

85 | )} 86 | 91 | 92 | ); 93 | }; 94 | -------------------------------------------------------------------------------- /examples/react-native-ts-todo/App.tsx: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import React, { useMemo, useState } from 'react'; 3 | import { Button, StyleSheet, Text, View } from 'react-native'; 4 | import { initializeParse, useParseQuery } from '@parse/react-native'; 5 | 6 | initializeParse( 7 | 'http://10.0.0.131:1337/parse', 8 | 'APPLICATION_ID', 9 | 'JAVASCRIPT_KEY' 10 | ); 11 | 12 | export default function App() { 13 | const [ 14 | hideDone, 15 | setHideDone 16 | ] = useState(false); 17 | 18 | const parseQuery = useMemo( 19 | () => { 20 | const parseQuery = new Parse.Query('Todo'); 21 | 22 | if (hideDone) { 23 | parseQuery.notEqualTo('done', true); 24 | } 25 | 26 | (parseQuery as any).withCount(); 27 | 28 | return parseQuery; 29 | }, 30 | [hideDone] 31 | ); 32 | 33 | const { 34 | isLive, 35 | isLoading, 36 | isSyncing, 37 | results, 38 | count, 39 | error, 40 | reload 41 | } = useParseQuery(parseQuery); 42 | 43 | return ( 44 | 45 | 46 | 47 | 79 | {isLoading && ( 80 |

Loading...

81 | )} 82 | {isLive && ( 83 |

Live!

84 | )} 85 | {isSyncing && ( 86 |

Syncing...

87 | )} 88 | {results && ( 89 |
    90 | {results.map(result => ( 91 |
  • 92 | {result.get('title')} 93 |
  • 94 | ))} 95 |
96 | )} 97 |

{count}

98 | {error && ( 99 |

{error.message}

100 | )} 101 | 106 | 107 | ); 108 | }; 109 | 110 | export async function getServerSideProps() { 111 | const initialHideDone = false; 112 | 113 | return { 114 | props: { 115 | initialHideDone, 116 | initialParseQuery: await encodeParseQuery(createParseQuery(initialHideDone)) 117 | }, 118 | } 119 | } -------------------------------------------------------------------------------- /packages/parse-react/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Parse Platform 4 | 5 |

6 | 7 |

@parse/react (alpha)

8 | 9 |

10 | An experimental package that provides you easy, real-time, offline-first interaction with the powerful Parse Server backend from your React applications. 11 |

12 | 13 |

14 | 15 | NPM Version 16 | 17 |

18 | 19 | # Getting Started 20 | 21 | First, install the [parse](https://www.npmjs.com/package/parse) and [@parse/react](https://www.npmjs.com/package/@parse/react) npm modules into your React application. 22 | 23 | ```sh 24 | npm install parse @parse/react --save 25 | ``` 26 | 27 | In your `App.js` file, import and initialize Parse: 28 | 29 | ```js 30 | import { initializeParse } from '@parse/react'; 31 | 32 | initializeParse( 33 | 'YOUR_SERVER_URL', 34 | 'YOUR_APPLICATION_ID', 35 | 'YOUR_JAVASCRIPT_KEY' 36 | ); 37 | ``` 38 | 39 | Now you are ready to use a Parse Query: 40 | 41 | ```js 42 | import React from 'react'; 43 | import Parse from 'parse'; 44 | import { useParseQuery } from '@parse/react'; 45 | 46 | const SomeComponent = () => { 47 | const parseQuery = new Parse.Query('SomeClass'); 48 | 49 | const { 50 | isLive, // Indicates that Parse Live Query is connected 51 | isLoading, // Indicates that the initial load is being processed 52 | isSyncing, // Indicates that the library is getting the latest data from Parse Server 53 | results, // Stores the current results in an array of Parse Objects 54 | count, // Stores the current results count 55 | error, // Stores any error 56 | reload // Function that can be used to reload the data 57 | } = useParseQuery( 58 | parseQuery, // The Parse Query to be used 59 | { 60 | enabled: true, // Enables the parse query (default: true) 61 | enableLocalDatastore: true, // Enables cache in local datastore (default: true) 62 | enableLiveQuery: true // Enables live query for real-time update (default: true) 63 | } 64 | ); 65 | 66 | return ( 67 |
68 | {isLoading && ( 69 |

Loading...

70 | )} 71 | {isLive && ( 72 |

Live!

73 | )} 74 | {isSyncing && ( 75 |

Syncing...

76 | )} 77 | {results && ( 78 |
    79 | {results.map(result => ( 80 |
  • 81 | {result.get('someField')} 82 |
  • 83 | ))} 84 |
85 | )} 86 |

{count}

87 | {error && ( 88 |

{error.message}

89 | )} 90 | 95 |
96 | ); 97 | }; 98 | 99 | export default SomeComponent; 100 | ``` 101 | 102 | # Learning More 103 | 104 | This package aims to provide easier access to a Parse Server backend when developing React applications. It was built on top of the official [Parse JS SDK](https://docs.parseplatform.org/js/guide/). These two libraries should be used together and you can refer to the sdk documentation in order to learn more about Parse Objects, Parse Queries, and more: 105 | - Learn more about [Parse Objects](https://docs.parseplatform.org/js/guide/#objects); 106 | - Learn more about [Parse Queries](https://docs.parseplatform.org/js/guide/#queries). 107 | 108 | # Example 109 | 110 | See a [Todo List Example](https://github.com/parse-community/parse-react/tree/master/examples/react-ts-todo). 111 | -------------------------------------------------------------------------------- /packages/parse-react-ssr/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Parse Platform 4 | 5 |

6 | 7 |

@parse/react-ssr (alpha)

8 | 9 |

10 | An experimental package that provides you easy, real-time, offline-first interaction with the powerful Parse Server backend from your React with SSR applications (e.g. Next.js). 11 |

12 | 13 |

14 | 15 | NPM Version 16 | 17 |

18 | 19 | # Getting Started (Next.js) 20 | 21 | First, install the [parse](https://www.npmjs.com/package/parse) and [@parse/react-ssr](https://www.npmjs.com/package/@parse/react-ssr) npm modules into your Next.js application. 22 | 23 | ```sh 24 | npm install parse @parse/react-ssr --save 25 | ``` 26 | 27 | Now you are ready to use a Parse Query: 28 | 29 | ```js 30 | import Parse from 'parse'; 31 | import { initializeParse, encodeParseQuery, useParseQuery } from '@parse/react-ssr'; 32 | 33 | initializeParse( // We need to initialize Parse 34 | 'YOUR_SERVER_URL', 35 | 'YOUR_APPLICATION_ID', 36 | 'YOUR_JAVASCRIPT_KEY' 37 | ); 38 | 39 | export async function getServerSideProps() { 40 | const parseQuery = new Parse.Query('SomeClass'); 41 | 42 | return { 43 | props: { 44 | parseQuery: await encodeParseQuery(parseQuery) // Return encoded Parse Query for server side rendering 45 | } 46 | }; 47 | }; 48 | 49 | export default function SomePage({ parseQuery }) { 50 | const { 51 | isLive, // Indicates that Parse Live Query is connected 52 | isLoading, // Indicates that the initial load is being processed 53 | isSyncing, // Indicates that the library is getting the latest data from Parse Server 54 | results, // Stores the current results in an array of Parse Objects 55 | count, // Stores the current results count 56 | error, // Stores any error 57 | reload // Function that can be used to reload the data 58 | } = useParseQuery( 59 | parseQuery, // The Parse Query to be used 60 | { 61 | enabled: true, // Enables the parse query (default: true) 62 | enableLocalDatastore: true, // Enables cache in local datastore (default: true) 63 | enableLiveQuery: true // Enables live query for real-time update (default: true) 64 | } 65 | ); 66 | 67 | return ( 68 |
69 | {isLoading && ( 70 |

Loading...

71 | )} 72 | {isLive && ( 73 |

Live!

74 | )} 75 | {isSyncing && ( 76 |

Syncing...

77 | )} 78 | {results && ( 79 |
    80 | {results.map(result => ( 81 |
  • 82 | {result.get('someField')} 83 |
  • 84 | ))} 85 |
86 | )} 87 |

{count}

88 | {error && ( 89 |

{error.message}

90 | )} 91 | 96 |
97 | ); 98 | }; 99 | ``` 100 | 101 | # Learning More 102 | 103 | This package aims to provide easier access to a Parse Server backend when developing React with SSR applications (e.g. Next.js). It was built on top of the official [Parse JS SDK](https://docs.parseplatform.org/js/guide/). These two libraries should be used together and you can refer to the sdk documentation in order to learn more about Parse Objects, Parse Queries, and more: 104 | - Learn more about [Parse Objects](https://docs.parseplatform.org/js/guide/#objects); 105 | - Learn more about [Parse Queries](https://docs.parseplatform.org/js/guide/#queries). 106 | 107 | # Example 108 | 109 | See a [Todo List Example](https://github.com/parse-community/parse-react/tree/master/examples/next-ts-todo). 110 | -------------------------------------------------------------------------------- /packages/parse-react-ssr/src/index.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useMemo } from 'react'; 2 | import { 3 | UseParseQueryOptions, 4 | UseParseQueryResult, 5 | useParseQuery as useParseQueryBase 6 | } from '@parse/react-base'; 7 | 8 | const isServer = typeof window === 'undefined'; 9 | 10 | if ((process as any).browser) { 11 | global.Parse = require('parse'); 12 | } else { 13 | global.Parse = require('parse/node'); 14 | } 15 | 16 | export const initializeParse = (serverURL: string, applicationId: string, javascriptKey: string) => { 17 | Parse.serverURL = serverURL; 18 | Parse.initialize(applicationId, javascriptKey); 19 | if (!isServer) { 20 | Parse.enableLocalDatastore(); 21 | } 22 | }; 23 | 24 | export interface EncodedParseQuery { 25 | className: string, 26 | query: object, 27 | findResult?: [] | object[], 28 | findError?: object 29 | } 30 | 31 | export const encodeParseQuery = async >( 32 | query: Parse.Query 33 | ): Promise => { 34 | let findResult, findError; 35 | 36 | try { 37 | findResult = await query.find(); 38 | } catch (e) { 39 | findError = e; 40 | } 41 | 42 | const encodedParseQuery = { 43 | className: query.className, 44 | query: query.toJSON(), 45 | findResult: findResult && (Parse as any)._encode(findResult) || undefined, 46 | findError: findError && (Parse as any)._encode(findError) || undefined 47 | }; 48 | 49 | if (!encodedParseQuery.findResult) { 50 | delete encodedParseQuery.findResult; 51 | } 52 | if (!encodedParseQuery.findError) { 53 | delete encodedParseQuery.findError; 54 | } 55 | 56 | return encodedParseQuery; 57 | }; 58 | 59 | export const useParseQuery = >( 60 | query: Parse.Query | EncodedParseQuery, 61 | options?: UseParseQueryOptions 62 | ): UseParseQueryResult => { 63 | if ( 64 | query instanceof Parse.Query && 65 | isServer 66 | ) { 67 | return { 68 | isLoading: true, 69 | isLive: false, 70 | isSyncing: false, 71 | reload: () => {} 72 | }; 73 | } 74 | 75 | const { 76 | findResult, 77 | findError, 78 | decodedQuery 79 | } = useMemo( 80 | () => { 81 | if (query instanceof Parse.Query) { 82 | return { 83 | decodedQuery: query 84 | }; 85 | } else { 86 | return { 87 | findResult: query.findResult && (Parse as any)._decode(query.findResult) || undefined, 88 | findError: query.findError && (Parse as any)._decode(query.findError) || undefined, 89 | decodedQuery: Parse.Query.fromJSON( 90 | query.className, 91 | query.query 92 | ) as Parse.Query 93 | }; 94 | } 95 | }, 96 | [query] 97 | ); 98 | 99 | const { 100 | findResultResults, 101 | findResultCount 102 | } = useMemo( 103 | () => ({ 104 | findResultResults: findResult && (findResult.results || findResult) || undefined, 105 | findResultCount: findResult && findResult.count || undefined 106 | }), 107 | [findResult] 108 | ); 109 | 110 | const serverReload = useCallback( 111 | () => { 112 | throw new Error( 113 | 'The reload function can not be used in the server side.' 114 | ); 115 | }, 116 | [] 117 | ) 118 | 119 | const serverResult = useMemo( 120 | () => ({ 121 | isLoading: false, 122 | isLive: false, 123 | isSyncing: false, 124 | results: findResultResults, 125 | count: findResultCount, 126 | error: findError, 127 | reload: serverReload 128 | }), 129 | [findResultResults, findResultCount, findError, serverReload] 130 | ); 131 | 132 | if (isServer) { 133 | return serverResult; 134 | } 135 | 136 | return useParseQueryBase( 137 | decodedQuery, 138 | { 139 | enabled: options && options.enabled || undefined, 140 | enableLocalDatastore: (options && options.enableLocalDatastore) ?? undefined, 141 | enableLiveQuery: (options && options.enableLiveQuery) ?? undefined, 142 | initialLoad: options && options.initialLoad || 143 | findResult && { 144 | results: findResultResults, 145 | count: findResultCount 146 | } || 147 | undefined 148 | } 149 | ); 150 | }; 151 | -------------------------------------------------------------------------------- /packages/parse-react-native/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Parse Platform 4 | 5 |

6 | 7 |

@parse/react-native (alpha)

8 | 9 |

10 | An experimental package that provides you easy, real-time, offline-first interaction with the powerful Parse Server backend from your React Native applications. 11 |

12 | 13 |

14 | 15 | NPM Version 16 | 17 |

18 | 19 | # Getting Started 20 | 21 | First, install the [parse](https://www.npmjs.com/package/parse) and [@parse/react-native](https://www.npmjs.com/package/@parse/react-native) npm modules into your React Native application. 22 | 23 | ```sh 24 | npm install parse @parse/react-native --save 25 | ``` 26 | 27 | In your `App.js` file, import and initialize Parse: 28 | 29 | ```js 30 | import { initializeParse } from '@parse/react-native'; 31 | 32 | initializeParse( 33 | 'YOUR_SERVER_URL', 34 | 'YOUR_APPLICATION_ID', 35 | 'YOUR_JAVASCRIPT_KEY' 36 | ); 37 | ``` 38 | 39 | Now you are ready to use a Parse Query: 40 | 41 | ```js 42 | import React from 'react'; 43 | import { Button, Text, View } from 'react-native'; 44 | import Parse from 'parse/react-native.js'; 45 | import { useParseQuery } from '@parse/react-native'; 46 | 47 | const SomeComponent = () => { 48 | const parseQuery = new Parse.Query('SomeClass'); 49 | 50 | const { 51 | isLive, // Indicates that Parse Live Query is connected 52 | isLoading, // Indicates that the initial load is being processed 53 | isSyncing, // Indicates that the library is getting the latest data from Parse Server 54 | results, // Stores the current results in an array of Parse Objects 55 | count, // Stores the current results count 56 | error, // Stores any error 57 | reload // Function that can be used to reload the data 58 | } = useParseQuery( 59 | parseQuery, // The Parse Query to be used 60 | { 61 | enabled: true, // Enables the parse query (default: true) 62 | enableLocalDatastore: true, // Enables cache in local datastore (default: true) 63 | enableLiveQuery: true // Enables live query for real-time update (default: true) 64 | } 65 | ); 66 | 67 | return ( 68 | 69 | {isLoading && ( 70 | 71 | Loading... 72 | 73 | )} 74 | {isLive && ( 75 | 76 | Live! 77 | 78 | )} 79 | {isSyncing && ( 80 | 81 | Syncing... 82 | 83 | )} 84 | {results && ( 85 | 86 | {results.map(result => ( 87 | 88 | 89 | {result.get('someField')} 90 | 91 | 92 | ))} 93 | 94 | )} 95 | 96 | {count} 97 | 98 | {error && ( 99 | 100 | {error.message} 101 | 102 | )} 103 | 104 |