score:0
i have found an github issue in which its suggested to use preloadfirestore
from reactfire.
they although provide an example in their sample app:
preloadfirestore(firebaseapp, firestore => {
return firestore().enablepersistence();
}),
if you want to use it like they do, you have a basic setup like this:
// create a preload function to combine multiple preloads
const preloadsdks = firebaseapp => {
return promise.all([
preloadfirestore(firebaseapp, firestore => {
return firestore().settings({host: 'localhost:8080', ssl: false});
}),
// preloaddatabase(),
// preloadstorage(),
// etc.
]);
};
function app() {
const firebaseapp = usefirebaseapp();
// kick off fetches for sdks and data that
// we know our components will eventually need.
//
// this is optional but encouraged as part of the render-as-you-fetch pattern
// https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense
preloadsdks(firebaseapp).then(() => promise.resolve());
return (
<yourcomponents />
)
}
afterwards you can just use usefirestore()
anywhere in the app to lazy load it with the settings above.
hints:
- you have to use the
<firebaseappprovider />
before preloading the sdks - your component preloading the sdks has to be wrapped inside a
<suspense />
or<suspensewithperf />
component - check the reactfire demo app to see how you can not only preload sdks but data as well
score:1
thanks for your help guys! reactfire api changed once again, this is currently working solution:
import react from 'react';
import logo from './logo.svg';
import './app.css';
import answers from './components/answers'
import homescreen from './screens/homescreen'
import { preloadfirestore, usefirebaseapp } from 'reactfire'
import firebase from 'firebase'
const preloadsdks = (firebaseapp: firebase.app.app) => {
return promise.all([
preloadfirestore({
firebaseapp,
setup: firestore => {
return firestore().settings({host: 'localhost:8080', ssl: false});
}
}),
// preloaddatabase(),
// preloadstorage(),
// etc.
]);
};
function app() {
const firebaseapp = usefirebaseapp();
preloadsdks(firebaseapp).then(() => promise.resolve());
return (
<div classname="app">
<header classname="app-header">
<img src={logo} classname="app-logo" alt="logo" />
<homescreen />
</header>
</div>
);
}
export default app;
score:1
the reactfire docs on emulation now differ from what was mentioned in the earlier answers, they were updated august 2021.
i've modified their example to show you how to use the firestore and auth emulators with firebase v9+:
import { getauth, connectauthemulator } from 'firebase/auth'; // firebase v9+
import { getfirestore, connectfirestoreemulator } from 'firebase/firestore'; // firebase v9+
import { firebaseappprovider, databaseprovider, authprovider, usefirebaseapp } from 'reactfire';
function firebasecomponents({ children }) {
const app = usefirebaseapp();
const firestore = getfirestore(app);
const auth = getauth(app);
// check for dev/test mode however your app tracks that.
// `process.env.node_env` is a common react pattern
if (process.env.node_env !== 'production') {
// set up emulators
connectfirestoreemulator(firestore, 'localhost', 8080);
connectauthemulator(auth, 'http://localhost:9099');
}
return (
<authprovider sdk={auth}>
<firestoreprovider sdk={firestore}>
<mycoolappthatusesauthandfirestore />
</firestoreprovider>
</authprovider>
);
}
similar connection patterns also exist for other emulators (connectstorageemulator, connectdatabaseemulator etc...)
Source: stackoverflow.com
Related Query
- How to use firestore emulator with reactfire?
- How to use Firestore realtime updates (onSnapshot) with redux-observable/rxjs?
- React: How to use an up to date state with Firestore onSnapshot and useEffect?
- How to use SimpleImageSlider in Reactjs with an array of images from firebase firestore
- How to filter data at firestore (firebase) and get the filtered data? How to use "equal to" with db collection?
- How to use refs in React with Typescript
- How can I use multiple refs for an array of elements with hooks?
- How to use callback with useState hook in react
- How to use children with React Stateless Functional Component in TypeScript?
- How to use JQuery with ReactJS
- How to use throttle or debounce with React Hook?
- How to use google analytics with next.js app?
- How to use onClick with divs in React.js
- How to use a TypeScript cast with JSX/TSX
- How to use jest with webpack?
- How to use React Router with Electron?
- How to use Redux's Provider with React
- How to use images in css with Webpack
- How can I use Fabric.js with React?
- How to use jQuery UI with React JS
- How to use shouldComponentUpdate with React Hooks?
- How to use materialize-css with React?
- How to use css modules with create-react-app?
- How to use React useRef hook with typescript?
- How to use create-react-app with an older React version?
- How to use custom Input with Formik in React?
- How to use React Router with Laravel?
- How to use normal anchor links with react-router
- How to use jest.config.js with create-react-app
- How to use different .env files with nextjs?
More Query from same tag
- Jest did not exit one second after the test run has completed when using GitHub Actions and Firebase
- Batch delete documents of a subcollection error: TypeError: n.indexOf is not a function
- React class properties vs ES6 class properties
- CRA 2.0 How to setup proxy in React?
- React Native + Firestore infinite loop, using hooks
- getting undefined value of imported function in react
- React conditional rendering with OR operator
- Render of array elements in React
- Accessing component's "key" prop
- Axios doesnt download users from API
- How to stop negative number with react hooks?
- Uncaught Invariant Violation: Hooks can only be called inside the body of a function component
- map through an object and fill another object
- Page flashes the Splash page with condition of user logged in
- NextJS: getStaticProps revalidate not working
- How to make react router inside of another router?
- react router, how to make page refresh on url change?
- Iterating through JSON and adding to array, but preventing multiple additions to the array
- How to update React context within a test?
- Faced TypeError: render is not a function when using Context API
- Why the componentDidUpdate is infinitely updated?
- How to load custom components in React from a different folder?
- How to get Data received in response superagent
- html input is not editable when added "value" parameter
- Redux silently not rendering connect()ed component
- Cannot read property 'params' of undefined while retrieving the data by id
- reason behind the default keyword for ES6
- Rechart animation for linechart bringing in lines from right side
- How to keep the image and card in the same proportion of size in react bootstrap?
- How to add styles to individual elements in react using e.target, when a button is clicked?