I am trying to upgrade to RNFirebase 6 from 5 and am going to move all my authentications from firebase.js sdk to RNFirebase and I am not sure why this initialization isn't working. I am using service everywhere so no idea what to be doing differently.
import { firebaseConfig } from '../configs/firebase';
import firebase from '#react-native-firebase/app';
import '#react-native-firebase/auth';
import "#react-native-firebase/database"
import "#react-native-firebase/dynamic-links"
import "#react-native-firebase/firestore"
import "#react-native-firebase/functions"
import "#react-native-firebase/iid"
import "#react-native-firebase/in-app-messaging"
import "#react-native-firebase/messaging"
import "#react-native-firebase/remote-config"
import "#react-native-firebase/storage"
import "#react-native-firebase/database"
import "#react-native-firebase/dynamic-links"
import "#react-native-firebase/firestore"
import "#react-native-firebase/functions"
let instance = null;
class FirebaseService {
constructor() {
if (!instance) {
this.app = firebase.initializeApp(firebaseConfig)
firebase.database().setLoggingEnabled(true);
instance = this;
}
return instance;
}
}
const firebaseService = new FirebaseService().app;
export default firebaseService;
So I didn't realize with React-Native-Firebase none of this initialization is needed. I am not sure why the initializeApp is in the docs or used anywhere. Hopefully this helps someone else out in the future since I banged my head against the wall all day
Related
I try to implement simple graphql subscription on FastAPI.
According to documentations but it is not working
import asyncio
import graphene
from fastapi import FastAPI
from starlette.graphql import GraphQLApp
from graphql.execution.executors.asyncio import AsyncioExecutor
from starlette.websockets import WebSocket
class Query(graphene.ObjectType):
hello = graphene.String(name=graphene.String(default_value="stranger"))
async def resolve_hello(self,info,name):
return "Hello " + name
class Subscription(graphene.ObjectType):
count = graphene.Int(upto=graphene.Int())
async def subscribe_count(root, info, upto=3):
for i in range(upto):
yield i
await asyncio.sleep(1)
app = FastAPI()
schema = graphene.Schema(query=Query, subscription=Subscription)
app.add_route("/", GraphQLApp(schema=schema, executor_class=AsyncioExecutor))
I googled and found that i might need to implement subscription-server like for Sanic or Aiohttp
I try but it doesn't work yet
from graphql_ws.websockets_lib import WsLibSubscriptionServer
subscription_server = WsLibSubscriptionServer(schema)
#app.websocket("/subscriptions")
async def subscriptions(websocket: WebSocket):
await subscription_server.handle(websocket)
return websocket
Error recieve:
return self.ws.open is False
AttributeError: 'WebSocket' object has no attribute 'open'
What i'm doing wrong and how it could be solved? Thank you.
I figured it out
below is workable solution
import asyncio
import graphene
import pydantic
from fastapi import FastAPI
from starlette_graphene3 import GraphQLApp, make_playground_handler
from graphene_pydantic import PydanticObjectType
class Subscription(graphene.ObjectType):
count = graphene.String()
async def subscribe_count(root, info):
for i in range(300):
yield f"{i}"
await asyncio.sleep(1)
schema = graphene.Schema(query=Query, subscription=Subscription)
app.mount("/", GraphQLApp(schema, on_get=make_playground_handler()))
I an using redux-thunk as a middleware and trying to connect to redux-firestore. When I run the application I am getting the error "TypeError: Object(...) is not a function" at createStore.
import reportWebVitals from './reportWebVitals';
import {createStore,applyMiddleware,compose} from 'redux';
import rootReducer from './store/reducers/rootReducer';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk'
import {reduxFirestore, getFirestore} from 'redux-firestore'
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase'
import FBConfig from './Config/FBConfig'
const store = createStore(rootReducer,
compose(applyMiddleware(thunk.withExtraArgument({getFirestore,getFirebase})),
reduxFirestore(FBConfig),
reactReduxFirebase(FBConfig)
)
);
I am using the extra arguments in my thunk actions like this:
export const createProject=(project)=>{
return(dispatch,getState,{getFirebase,getFirestore})=>{
//asyn call to database
const firestore=getFirestore();
firestore.collection('projects').add({
...project,
authorFirstName:'Nam',
authorLastName:'Pam',
authorId:123,
createAt: new Date()
}).then(()=>{
dispatch({type:'CREATE_PROJECT',project});
}).catch((err)=>{
dispatch({type:'CREATE_PROJECT_ERROR',err})
})
}
};
The error that you are seeing is likely due to upgrading react-redux-firebase from v2 to v3 (or basing new code on outdated examples). This update introduced some breaking changes such as the removal of the reactReduxFirebase store enhancer function. The package now uses React contexts and introduced some new hooks such as useFirebase and useFirestore which allow you to access firebase through the context in function components. But that doesn't help with your thunk.
In the page on Redux Thunk Integration, they recommend passing the getFirebase function to the withExtraArgument.
thunk.withExtraArgument(getFirebase)
As far as accessing firestore, this GitHub discussion recommends accessing it through the getFirebase function.
getFirebase().firestore()
You want your extra argument to be an object with properties getFirebase and getFirestore. We use getFirebase as one property and create an inline arrow function for the getFirestore property.
import {createStore,applyMiddleware, AnyAction} from 'redux';
import thunk from 'redux-thunk';
import {getFirebase} from 'react-redux-firebase';
const store = createStore(
rootReducer,
applyMiddleware(
thunk.withExtraArgument({
getFirebase,
getFirestore: () => getFirebase().firestore(),
})
)
);
I currenlty want to start integrating webpack into my js firebase app.
Currently, I have done import * as firebase from 'firebase/app and added my required dependencies after.
However, when I do that, it says that it could not find the modules with an npm not found warning in console.
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
Is there any way to fix this?
This included in multiple files, as they all require firebase.
Thank you very much in advance.
I think, it should be working correctly.
Anyway, here is my solution for importing firebase libraries only once.
I have created single file/class, called FirebaseConnector:
import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/functions';
import AppConfig from 'src/js/config/app_config';
const FUNCTIONS_REGION = 'europe-west1';
class FirebaseConnector {
static initFirebase() {
if (!firebase.apps.length) {
firebase.initializeApp(AppConfig.firebase);
}
}
static getDb() {
FirebaseConnector.initFirebase();
return firebase.firestore();
}
static getFunctions() {
FirebaseConnector.initFirebase();
return firebase.app().functions(FUNCTIONS_REGION);
}
}
export default FirebaseConnector;
Whenever I am using something from the Firebase API, I just import that connector and use objects that returns my FirebaseConnector.getDb() and FirebaseConnector.getFunctions(), eg.:
import FirebaseConnector from './firebase_connector';
// ...
const sendEmail = FirebaseConnector.getFunctions().httpsCallable('sendEmail');
// ...
image of the ERROR
OK so I'm starting a new project and this is the first time that this has happened to me/ I keep getting an error stating ×
TypeError: middleware is not a function i checked dependencies and everything seems fine gone over my code nothing seems wrong please help
I tried deleting the modules and installing them again, I also checked on a passed application I've been doing and since I'm just starting out the code looks identical but that seems to work.
import { createStore, applyMiddleware } from "redux";
import promiseMiddleware from "redux-promise-middleware";
import userReducer from "./ducks/userReducer";
const middleware = applyMiddleware(promiseMiddleware());
const store = createStore(userReducer, middleware);
export default store;
import React, { Component } from "react";
import routes from "./routes";
import { Provider } from "react-redux";
import store from "./redux/store";
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="App">{routes}</div>
</Provider>
);
}
}
export default App;
When you use the function applyMiddleware, the middlewares shouldn't be called as functions.
So instead of:
const middleware = applyMiddleware(promiseMiddleware());
do:
const middleware = applyMiddleware(promiseMiddleware);
See https://redux.js.org/api/applymiddleware#example-custom-logger-middleware for more details.
I use redux, react-redux, react-router, and react-router-redux, and redux-thunk.
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { browserHistory } from 'react-router'
import { routerMiddleware } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'
...
const reduxRouterMiddleware = routerMiddleware( browserHistory )
const store = createStore(
mainReducer,
applyMiddleware(reduxRouterMiddleware, thunkMiddleware)
)
I was hoping as a result to be able to do thenable dispatch
dispatch(...).then()
but I get the message that then is not a function of dispatch.
How can I accomplish this?
the answer: it depends on what is returned by dispatch; if a promise is returned, then it will be thenable.