I'm trying to use GraphQL with Apollo and repack in my sample react native app. However, when I run the app in the simulator, I receive this error of GraphQLError not existing. If I comment out all the Apollo code in App.tsx, the app works just fine. Does anyone have any insight on if I'm using the webpack.configure.js incorrectly, or if I have an error in my code?
App.tsx
import { Federated } from '#callstack/repack/client';
import React from 'react';
import { ScrollView, Text, AppRegistry } from 'react-native';
import { ApolloProvider } from '#apollo/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '#apollo/client';
const App1 = React.lazy(() => Federated.importModule('app1', './App'));
// Initialize Apollo Client
const client = new ApolloClient({ uri: 'localhost:4000/graphql', cache: new InMemoryCache()});
export default function App() {
return (
<ApolloProvider client={client}>
<ScrollView> <Text> Hello World</Text></ScrollView>
<App1 />
</ApolloProvider>
);
}
webpack.config.js
rules: [{
test: /\.[jt]sx?$/,
include: [
/node_modules(.*[/\\])+react/,
/node_modules(.*[/\\])+#react-native/,
/node_modules(.*[/\\])+#react-native-community/,
/node_modules(.*[/\\])+#expo/,
/node_modules(.*[/\\])+pretty-format/,
/node_modules(.*[/\\])+metro/,
/node_modules(.*[/\\])+abort-controller/,
/node_modules(.*[/\\])+#callstack\/repack/,
/node_modules(.*[/\\])+#apollo\/client/,
/node_modules(.*[/\\])+graphql/,
/node_modules(.*[/\\])+core-js-pure/,
],
use: 'babel-loader',
Related
In react native app , I am using firebase google analytics.
The problem is in tracking screens, I follow this link , however I am having
this error .
TypeError: (0 , _analytics.analytics) is not a function).
And the Screenshoot.
My appcontainer file (drawer.js) :
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import Feed from '../components/Home';
import {FeedStack} from './stack';
import React, { Component } from 'react';
import {analytics }from '#react-native-firebase/analytics';
const MyDrawerNavigator = createDrawerNavigator(
{
Feed: FeedStack
},
);
function getActiveRouteName(navigationState) {
if (!navigationState) {
return null;
}
const route = navigationState.routes[navigationState.index];
if (route.routes) {
return getActiveRouteName(route);
}
return route.routeName;
}
const AppContainer =createAppContainer(MyDrawerNavigator);
export default () => {
return <AppContainer
onNavigationStateChange={(prevState, currentState, action) => {
const currentRouteName = getActiveRouteName(currentState);
const previousRouteName = getActiveRouteName(prevState);
if (previousRouteName !== currentRouteName) {
analytics().setCurrentScreen(currentRouteName, currentRouteName);
}
}}
/>
}
My app.js :
import Feed from './src/components/Home';
import HomePage from './src/components/homeEpaper';
import Navigator from './src/navigator/drawer';
import React, { Component } from 'react';
export default function App() {
return (
<Navigator />
)
}
I tried also import analytics from '#react-native-firebase/analytics';
and i got this error. screenshot
if you're using setCurrentScreen method, then you need to use the following
package.jsom
"#react-native-firebase/analytics": "^10.4.0",
"#react-native-firebase/app": "^10.4.0",
Incorrect
import analytics from '#react-native-firebase/analytics';
.
.
.
analytics().setCurrentScreen('SignUpScreen');`
Correct
import analytics from '#react-native-firebase/analytics';
.
.
.
// Google Firebase Analytics
analytics().logScreenView({
screen_name: 'SignUpScreen',
screen_class: 'SignUpScreen'
});
I think that you didn't follow the docs 100% to the point :)
In your code you do:
import {analytics }from '#react-native-firebase/analytics';
However if you look at this file: https://github.com/invertase/react-native-firebase/blob/master/packages/analytics/lib/index.js you'll see that there is no named export analytics. What you do when you type import {analytics} is importing a named export: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
Since there is no named export analytics in that file the value for analytics is undefined and you get the error you describe.
I should type (as written in the linked example):
import analytics from '#react-native-firebase/analytics';
In new update setCurrentScreen is no longer present. Use other functions to log.
I'm building a react-native app with Expo, when I doing refactor job and suddenly I can't open my app with Expo client, it shows an error
TypeError: (0, _redux.combinReducers) is not a function. (In '(0, _redux.combineReducers)(reducers)', '(0, _redux.combineReducers)' is undefined)
after some researching I see some reason cause this issue is cause the same folder name with redux, which I made this mistake also, so I change the folder name to "appRedux", after that the error message change to
Unable to resolve "../../../../src/redux" from "node_modules\react-redux\lib\connect\mapDispatchToProps.js"
I'm sure I've wrapped my App component in Provider as this solution said, but just no luck to solve it.
I've been stuck in here for few days, please help me to solve this issue, if need more info please let me know, any suggestion is appreciated.
App.js
import React, { Component } from 'react';
import Navigation from './src/navigation'
import { Provider } from 'react-redux'
import { getStore, getPersistor } from './src/store/configureStore'
import { PersistGate } from 'redux-persist/integration/react'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { ApolloProvider } from '#apollo/react-hooks'
import { getClient } from './src/services/GraphQL/Client'
const store = getStore()
const persistor = getPersistor()
const client = getClient()
export default class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<Provider store={store} >
<PersistGate persistor={persistor}>
<SafeAreaProvider>
<Navigation />
</SafeAreaProvider>
</PersistGate>
</Provider>
</ApolloProvider>
);
}
}
configureStore.js
import { createStore, applyMiddleware } from 'redux'
import { persistStore } from 'redux-persist'
import reducers from '#redux'
import thunk from 'redux-thunk'
const store = createStore(reducers, applyMiddleware(thunk))
const persistor = persistStore(store)
const getPersistor = () => persistor
const getStore = () => store
export {
getStore,
getPersistor
}
Reducers.js
import { combineReducers } from 'redux'
import { persistCombineReducers, persistReducer } from 'redux-persist'
import { AsyncStorage } from 'react-native'
import carts from './carts'
import app from './app'
import user from './user'
const rootConfig = {
key: 'root',
storage: AsyncStorage,
blacklist: [
'app',
'carts',
'user'
]
}
const appConfig = {
key: 'app',
storage: AsyncStorage,
blacklist: [
'selectedDate',
'selectedDateIndex',
'isFetching',
'showFilter'
]
}
const cartConfig = {
key: 'carts',
storage: AsyncStorage,
blacklist: [
'isFetching',
'error'
]
}
const userConfig = {
key: 'user',
storage: AsyncStorage,
blacklist: [
'isFetching',
'error',
'history'
]
}
export default persistCombineReducers(rootConfig, {
app: persistReducer(appConfig, app),
carts: persistReducer(cartConfig, carts),
user: persistReducer(userConfig, user)
})
Finally I solve this issue by start expo client with
expo start -c
which will start expo app with clearing the cache, hope this will help someone facing the same issue
I am trying to run a query using graphql, but keep getting a Network error. Here is the code:
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { ApolloProvider, gql } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory'
import { NETWORK_INTERFACE } from './src/utils/constants'
import { colors } from './src/utils/constants';
import Main from './src/Main';
const client = new ApolloClient({
link: new HttpLink({
uri: NETWORK_INTERFACE
// http://localhost:3000/graphql
}),
cache: new InMemoryCache()
})
console.log('Tesset')
client.query({
query: gql`
query GetPosts {
getPosts {
text
_id
createdAt
}
}`
}).then(result => console.log(result));
export default class App extends React.Component {
render() {
return (
<ApolloProvider client={client}>
<ThemeProvider theme={colors}>
<Main />
</ThemeProvider>
</ApolloProvider>
);
}
}
The client.query() causes following error.
[Unhandled promise rejection: Error: Network error: Network request failed]
* http://127.0.0.1:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:144904:32 in ApolloError
I'm using graphql in the back-end with no issues. Able to do posts and and gets etc. Any help would be appriciated
I am trying to use redux-promise-middleware in my app, but when I am trying to run my app error comes with an error message: 'middleware is not a function or middleware is null'.
I tried to use middleware without a function as suggested in redux async docs, but still error is coming.
configureStore.js
import { createStore, applyMiddleware } from 'redux'
import app from './reducers/index';
import PromiseMiddleware from 'redux-promise-middleware';
const configureStore = () => {
let middleware = applyMiddleware(PromiseMiddleware());
let store = createStore(app, middleware);
return store
};
export default configureStore;
index.js
import React from 'react'
import { AppRegistry } from 'react-native';
import App from './App';
import { Provider } from 'react-redux'
import configureStore from './configureStore'
const store = configureStore();
const ReduxMiddleware = () => {
<Provider store={store}>
<App />
</Provider>
}
AppRegistry.registerComponent('ReduxMiddleware', () => ReduxMiddleware);
Please anybody, suggest to me that why I am facing this error.
I am new to redux.
import promiseMiddleware from 'redux-promise-middleware';
composeStoreWithMiddleware = applyMiddleware(
promiseMiddleware,
)(createStore);
And not : PromiseMiddleware()
(not uppercase and w/o () )
I've just installed react-native-navigation using the installation guides provided on https://wix.github.io/react-native-navigation/#/installation-ios and the usage guide https://wix.github.io/react-native-navigation/#/usage.
I've followed these and checked out multiple example apps, but I cannot figure out why my screens won't register.
The error I receive is: console.error: "Navigation: project.testscreen registration result is 'undefined'".
The registerScreens is called and the registration is completed, but it seems like the registration results to undefined.
index.js
import App from './src/app'
const app = new App();
app.js
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';
registerScreens();
Navigation.startTabBasedApp({
tabs: [{
label: 'Test',
screen: 'project.testscreen',
title: 'Test',
}]
});
screens.js
import { Navigation } from 'react-native-navigation'
import { TestScreen } from './components/testScreen'
export function registerScreens() {
Navigation.registerComponent('project.testscreen', () => TestScreen)
}
testScreen.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class TestScreen extends Component {
render() {
return (
<View>
<Text>Hi</Text>
</View>
)
}
}
export default TestScreen
react-native: 0.55.4
react-native-navigation: latest (1.1.479)
change
import { TestScreen } from './testScreen'
to
import TestScreen from './testScreen'
Because TestScreen exports as default