I'm using React Native, and after background the application or lock the phone, when you focus it again all the subscriptions are disconnected and they are not receving events anymore (both useSubscription and subscribeToMore)
I'm creating the client in this way
const url = config.aws_appsync_graphqlEndpoint;
const subs = createSubscriptionHandshakeLink(config, url);
const client = new ApolloClient({
link: ApolloLink.from([createAuthLink(config), subs]),
cache: new InMemoryCache(),
});
This are the versions that I'm using
"aws-appsync-auth-link": "^3.0.7",
"aws-appsync-subscription-link": "^3.1.2",
"#apollo/client": "^3.7.4",
"react-native": "0.70.3",
thanks!
Related
Lately, FB has deprecated the support for Login authentication on Android embedded browsers.
https://developers.facebook.com/blog/post/2021/06/28/deprecating-support-fb-login-authentication-android-embedded-browsers/
Since then I am getting the following error
For your account safety, logging into Facebook from an embedded browser is disabled.
From my code, I tried removing "behavior:web" but it's giving the same error. Is anyone facing the same error in Expo react native?
My Code:
const {
type,
token,
expirationDate,
permissions,
declinedPermissions,
} = await Facebook.logInWithReadPermissionsAsync({
permissions: ['public_profile', 'email']
});
if (type === 'success') {
const response = await fetch(`https://graph.facebook.com/me?fields=id,name,email&&access_token=${token}`);
}
Version Details:
SDK Version: 42.0.0
expo-facebook: ~11.3.1
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "0.63.4"
Any help is appreciated.Thanks in advance.
I want to use twilio API to my vuejs2 app looking at demo https://github.com/TwilioDevEd/sdk-starter-node:
I added in in project with command
yarn add twilio
But I failed to create Twilio.Chat.Client with valid token, which I got from backendpoint,
as imported twilio object is invalid. In src/main.js I added line :
export const Twilio = require('twilio')
and in my vue page with code:
console.log('initializeChatClient token::')
console.log(token)
console.log('initializeChatClient id::')
console.log(id)
console.log('initializeChatClient channel::')
console.log(channel)
// const Twilio = require('twilio')
console.log('$twilio::')
console.log(Twilio)
console.log('$twilio.Chat::')
console.log(Twilio.Chat)
const client = await Twilio.Chat.Client.create(token)
I got error :
TypeError: Cannot read property 'Client' of undefined
and in console I see invalid twilio object : https://prnt.sc/w41cc7
What is wrong ?
package.json :
"axios": "^0.19.0",
"core-js": "^3.3.2",
...
"twilio": "^3.54.0",
"vue": "^2.6.10",
...
Thanks!
Based on your screenshot, Twilio actually contains a function.
Check out this file: https://github.com/TwilioDevEd/sdk-starter-node/blob/master/src/notification_handler.js:
There is this method that initialises the client using new Twilio(...):
function getTwilioClient() {
// Twilio Library
const client = new Twilio(
config.TWILIO_API_KEY,
config.TWILIO_API_SECRET,
{accountSid: config.TWILIO_ACCOUNT_SID}
);
...
}
Follow the same approach to initialise yours.
i'm integrating flurry with my react-native app. I use react-native-flurry-sdk#3.7.0 with react-native#0.59.9. I did everything acсording with https://www.npmjs.com/package/react-native-flurry-sdk, but i couldn't send events. Most of them(events) doesn't received by platform. Only a few part of them reach the target with a big delay(a couple of hours).
This is my flurry settings:
import Flurry from "react-native-flurry-sdk";
const FLURRY_ANDROID_API_KEY = "...";
const FLURRY_IOS_API_KEY = "...";
new Flurry.Builder()
.withCrashReporting(true)
.withLogEnabled(true)
.withLogLevel(Flurry.LogLevel.DEBUG)
.build(FLURRY_ANDROID_API_KEY, FLURRY_IOS_API_KEY);
Flurry.logEvent("1", { param: "true" }, true);
Flurry.endTimedEvent("React Native Timed Event");
What is wrong?
This is a known issue, please see,
https://github.com/flurry/react-native-flurry-sdk/issues/17
https://github.com/flurry/react-native-flurry-sdk/issues/19
It has been resolved in 5.3.0 release with the session delay fix.
I'm trying to use Admob Rewarded Video in my React Native app.
Here is the code I am testing:
const advert = firebase.admob().rewarded('ca-app-pub-3940256099942544/5224354917');
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
// Load the advert with our AdRequest
advert.loadAd(request.build());
advert.on('onAdLoaded', () => {
console.log('Advert ready to show.');
});
advert.on('onRewarded', (event) => {
console.log('The user watched the entire video and will now be rewarded!', event);
});
if (advert.isLoaded()) {
advert.show();
}
else {
advert.on('onAdLoaded', () => {
console.log('Advert ready to show.');
advert.show();
});
}
This is perfectly working when I execute it from the main screen of the app (root of the navigator), but not anymore after I move to an other screen by calling this.props.navigation.navigate('ScreenB');:
The ad is showing normally but I cannot skip, open or close it... The app gets stuck in this state.
I am currently testing on iOS simulator and I use the following config:
"react": "16.6.0-alpha.8af6728", "react-native": "^0.57.2",
"react-native-firebase": "^5.1.0"
Am I missing something or is it a bug?
Evertime when you want to show a banner you need to rebuild it again.
A single rewarded video instance can only be shown once. If you want
to display another, create a new one.
advert.loadAd(request.build());
I made a UI with React Native, as well as a Cheerio.js scraper (with Cron Job to activate it once every day) I'll use to grab certain data from the web, so it can render in the UI. However, I have no idea how to link the two of them.
I am pretty sure I can do this with Express (which I am most comfortable with for the back-end), but can someone tell me exactly what I need to do to connect my front-end to a back-end?
Just in case, I am a junior dev (better on the front-end than the back-end) so please keep your answers simple. Even if your answers are more conceptual, rather than code-based, I'd really appreciate it.
API
I'm quite happy with GraphQL as an alternative to REST. However, there are many ways to connect through an api. Your client needs the link to where your server is running, and your server needs to enable that.
Tutorials
I think I couldn't explain it better than this tutorial (with example on Github): https://medium.com/react-native-training/react-native-with-apollo-server-and-client-part-1-efb7d15d2361
https://medium.com/react-native-training/react-native-with-apollo-part-2-apollo-client-8b4ad4915cf5
And following Stephen Grider's tutorial on Udemy for deeper understanding of GraphQL. He is using React and not React Native in his tutorial but the syntax remains very close.
https://www.udemy.com/graphql-with-react-course/learn/v4/overview
Important notice - The first tutorials use "apollo-server" while udemy's tutorial uses graphql. apollo-server changes quite often and graphql may be clearer.
Example
Here's how my bridge between the two looks like. The biggest difficulty was dealing with Cors for the front-end version of the app (Next.js) and finding out that the server can be accessed on http://10.0.3.2:8080/graphql (may vary) instead of localhost:8080.
My index.android.js (client side):
import React from 'react'
import { AppRegistry } from 'react-native'
import App from './app'
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo'
const Client = () => {
const networkInterface = createNetworkInterface({
uri: 'http://10.0.3.2:8080/graphql'
})
const client = new ApolloClient({
networkInterface
});
return (
<ApolloProvider client={client}>
<App />
</ApolloProvider>)
}
AppRegistry.registerComponent('apolloclient', () => Client);
My app.js server side
const express = require('express');
// const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const cors = require('cors');
const chalk = require('chalk');
// New imports
// NEVER FORGET to require the models,
// in which schemas are registered for a certain model
// forgetting it would throw "Schema hasn't been registered for model..."
const models = require('./models');
const expressGraphQL = require('express-graphql');
const schema = require('./schema/schema');
const app = express();
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// My mongoLab URI
const MONGO_URI = 'mongodb://xxx:xxx#xxx.mlab.com:xxx/xxx';
// mongoose's built in promise library is deprecated, replace it with ES2015 Promise
mongoose.Promise = global.Promise;
// Connect to the mongoDB instance and log a message
// on success or failure
mongoose.connect(MONGO_URI);
mongoose.connection.once('open', () => console.log(`${chalk.blue(`🗲 Connected to MongoLab instance 🗲`)}`));
mongoose.connection.on('error', error => console.log(`${chalk.yellow(`⚠ Error connecting to MongoLab: ` + error + ` ⚠`)}`));
app.use(cors());
// We pass the schema as an option to our expressGraphQL middleware
app.use('/graphql', expressGraphQL({
schema,
graphiql: true
}))
module.exports = app;
my index.js (server side):
const app = require('./app');
const chalk = require('chalk');
const PORT = 8080;
app.listen(PORT, () => {
console.log(`${chalk.green(`✔ Server started on http://localhost:${PORT} ✔`)}`);
});
Assuming you're communicating with an API built with Express then use fetch as described in the docs: https://facebook.github.io/react-native/docs/network.html