I am working with GraphQL. I need to pass parameters to Http headers. However, I see an option to pass only normal parameters (code below). PLEASE tell me how to do it!!
Query(
options: QueryOptions(
document: gql(userGraphQL),
variables: {
"..." : "..."
}
),
builder: ...
)
I have created this file to related the GraphQL
gql_utils.dart file
class GraphQLUtils {
static final GraphQLUtils _instance = GraphQLUtils._internal();
GraphQLClient? _client;
factory GraphQLUtils() {
return _instance;
}
GraphQLUtils._internal() {
final httpLink = HttpLink(
'your base url',
);
final authLink = AuthLink(
ignore: undefined_identifier
getToken: () async => 'Bearer $YOUR_PERSONAL_ACCESS_TOKEN',
);
var link = authLink.concat(httpLink);
var link = httpLink;
var link = httpLink;
final policies = Policies(
fetch: FetchPolicy.networkOnly,
);
_client = GraphQLClient(
cache: GraphQLCache(),
link: link,
defaultPolicies: DefaultPolicies(
watchQuery: policies,
query: policies,
mutate: policies,
),
);
}
Future<Map<String, dynamic>> queryRepo(
DocumentNode readRepositories, map) async {
final options = WatchQueryOptions(
document: readRepositories,
variables: map,
pollInterval: const Duration(seconds: 4),
fetchResults: true,
);
QueryResult result = await _client!.query(options);
if (result.hasException) {
Map<String, dynamic> response = <String, dynamic>{};
response['success'] = false;
response['message'] = result.exception!.graphqlErrors[0].message;
return response;
} else {
Map<String, dynamic> response = <String, dynamic>{};
response['success'] = true;
response['data'] = result.data;
return response;
}
}
}
this is Example query class
class UserQueries {
static final userInsertQuery = gql(r'''
mutation Insert_users($objects: [users_insert_input!]!, $onConflict: users_on_conflict) {
insert_users(objects: $objects, on_conflict: $onConflict) {
returning {
id
name
timestamp
}
}
}
''');
}
and how to call api
Future insertUserApi(String name) async {
try {
Map<String, dynamic> variables = <String, dynamic>{};
variables = {
"objects": [
{"name": name}
],
"onConflict": {
"constraint": "users_pkey",
"update_columns": [
"id",
"name",
]
}
};
await GraphQLUtils()
.queryRepo(UserQueries.userInsertQuery, variables)
.then((response) async {
if (response["data"] != null) {
print("----Data---:${response["data"]}");
Get.back();
} else {
Get.snackbar(
"Error",
"Something Went wrong",
);
}
});
} catch (e, st) {
Get.snackbar(
"Error",
e.toString(),
);
}
}
i have been trying to solve this error , after i login i was getting type 'Null' is not a subtype of type 'String' for about 5 seconds and after that the app successfully login, i do not know why this happen, i already add null check to the User but i still get the error . Below is my code, tell me if you need more info, Thanks for helping
class _controState extends State<contro> {
_controState();
User? user = FirebaseAuth.instance.currentUser;
UserModel loggedInUser = UserModel();
var role;
var email;
var id;
#override
void initState() {
super.initState();
FirebaseFirestore.instance
.collection("users") //.where('uid', isEqualTo: user!.uid)
.doc(user!.uid)
.get()
.then((value) {
this.loggedInUser = UserModel.fromMap(value.data());
}).whenComplete(() {
CircularProgressIndicator();
setState(() {
email = loggedInUser.email.toString();
role = loggedInUser.role.toString();
id = loggedInUser.uid.toString();
});
});
}
routing() {
if (role == 'Freelancer') {
return JobScreen(
id: id,
);
} else {
return JobScreenClient(
id: id,
);
}
}
#override
Widget build(BuildContext context) {
CircularProgressIndicator();
return routing();
}
}
inside your routing, role might be null before FirebaseFirestore's result get ready, try this:
routing() {
if(role == null){
return Container(); // show empty widget like this or what widget you want
}else if (role == 'Freelancer') {
return JobScreen(
id: id,
);
} else {
return JobScreenClient(
id: id,
);
}
}
You have to add async/await to your code, because it's future functions..
void initState() async {
super.initState();
await FirebaseFirestore.instance
.collection("users") //.where('uid', isEqualTo: user!.uid)
.doc(user!.uid)
.get()
.then((value) {
this.loggedInUser = UserModel.fromMap(value.data());
}).whenComplete(() {
CircularProgressIndicator();
setState(() {
email = loggedInUser.email.toString();
role = loggedInUser.role.toString();
id = loggedInUser.uid.toString();
});
});
}
routing() {
if(role == null){
return const Center(child: CircularProgressIndicator());
}else if (role == 'Freelancer') {
return JobScreen(
id: id,
);
} else {
return JobScreenClient(
id: id,
);
}
}
I am new to angular/ionic and I am assigned with a project where the user supposed to be logged in even after he close the application unless logging out. can anyone suggest me how to modify the following code?
login.page.ts
import { AuthenticationService } from '../../services/authentication/authentication.service';
import {
ToastController,
AlertController,
NavController,
ModalController,
Platform,
} from '#ionic/angular';
import { FormBuilder, Validators, FormGroup } from '#angular/forms';
import { ApiService } from '../../services/api/api.service';
import { Router } from '#angular/router';
import { crm, environment } from '../../../environments/environment';
import { DataService } from '../../services/data/data.service';
import { ToastService } from '../../services/toast/toast.service';
import { AlertService } from '../../services/alert/alert.service';
import { ForgotPasswordModalPage } from '../forgot-password-modal/forgot-password-modal.page';
import { Device } from '#ionic-native/device/ngx';
import { FcmService } from '../../services/fcm/fcm.service';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { LoadingService } from 'src/app/services/loading/loading.service';
import { ServerService } from 'src/app/services/server/server.service';
import * as moment from 'moment';
import { AppComponent } from '../../app.component';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
loginForm: FormGroup;
development: boolean;
counts: number = 0;
platformName: string;
settings: any;
constructor(
private authService: AuthenticationService,
public formBuilder: FormBuilder,
private api: ApiService,
private router: Router,
private alert: AlertService,
private dataService: DataService,
private toast: ToastService,
private navCtrl: NavController,
private modalCtrl: ModalController,
private device: Device,
private fcmService: FcmService,
private splashScreen: SplashScreen,
private loadingService: LoadingService,
private server: ServerService,
private alertCtrl: AlertController,
private platform: Platform,
private app: AppComponent,
) {
this.initForm();
}
ngOnInit(): void {
this.setupServerUrl();
}
async setSettings() {
console.log('settings called in appcomp');
// check if in storage get it from storage
this.dataService.getStorageData('settings').then((data) => {
if (data != null) {
this.settings = JSON.parse(data);
console.log('seetings from storage:', this.settings);
// this.dataService.setData('settings', this.settings)
} else {
// not found in storage get from api
this.getSettingsApi();
}
});
}
async getSettingsApi() {
// this.loadingService.loading();
let mainLogos = document.getElementsByClassName('logo');
for (let i = 0; i < mainLogos.length; i++) {
mainLogos[i].setAttribute('src', 'assets/img/spinner.gif');
}
await this.api.get(crm.SETTINGS).subscribe((res) => {
console.log('the api is ', this.api.url);
// Note the api I supposed to get
console.log('setting from appcomp api: ', res);
if (res['code'] === '000') {
this.settings = res;
// this.dataService.setData('settings', this.settings)
console.log('settings from appcomp done');
this.dataService.setStorageData('settings', res);
for (let i = 0; i < mainLogos.length; i++) {
mainLogos[i].setAttribute('src', this.settings.image_id.src);
}
// this.loadingService.dismissLoading();
}
});
}
// async setSettings() {
// console.log('settings from login')
// await this.dataService.getStorageData('settings').then( data => {
// console.log('seetings from storage: ', data)
// if (data != null) {
// this.settings = JSON.parse(data);
// this.dataService.setData('settings', this.settings)
// }else { // not found in storage get from api
// this.api.get(crm.SETTINGS).subscribe(res => {
// if (res['code'] === '000') {
//
// this.settings = res
// this.dataService.setData('settings', this.settings)
// this.dataService.setStorageData('settings', res);
// // this.settingsService.data = this.settings
//
// // toolbar logo
// // let mainLogos = document.getElementsByClassName('logo')
// // for (let i = 0; i < mainLogos.length; i++) {
// // mainLogos[i].setAttribute('src', this.settings.image_id.src)
// // }
// }
// })
// }
// })
// }
// Note : server set up and function coming from server.service
setupServerUrl() {
this.dataService.getStorageData('url').then((res) => {
if (res) {
this.server.url = JSON.parse(res);
console.log('server', res);
console.log('server result123: ', this.server.url);
console.log('login result123: ', this.server.login_url);
this.server.login_url = JSON.parse(res);
console.log('login', res);
// console.log('have result serve url:', this.server.url);
// console.log('have result login url:', this.server.login_url);
this.getApiDomain('https://oasis.api.app360.my/');
} else {
console.log('empty result url:', this.server.url);
this.getApiDomain('oasis.member.app360.my');
}
});
}
ionViewDidEnter() {
if (this.server.login_url === this.server.login_dev) {
this.development = true;
}
if (this.server.login_url === this.server.login_prod) {
this.development = false;
}
// this.setup()
// this.development = true;
// break;
// case this.server.prod:
// this.server.url = this.server.prod // added by me
// this.development = false;
// break;
// }
// })
}
initForm() {
this.loginForm = this.formBuilder.group({
email: [
'',
Validators.compose([
Validators.pattern('.+#.+\\..+'),
Validators.required,
]),
],
password: ['', Validators.required],
});
}
async getApiDomain(urlDomain: String) {
console.log('beforeeee', this.server.url);
await this.api
.getBeforeLogin(crm.API_DOMAIN, '', '?url=' + urlDomain)
.subscribe((res) => {
if (res['code'] === '000') {
// console.log('resulttt',res['domain'])
this.server.url = 'https://' + res['domain'] + '/';
this.server.prod = 'https://' + res['domain'] + '/';
this.server.secret = res['api_key'];
// this.server.url = "http://oasis.api.app360.my/"
console.log('afterrrr', this.server.url);
// console.log('afterrrr', this.server.secret);
this.getSettingsApi();
this.setHome();
this.checkToken();
}
});
}
// resolveSettings() {
// console.log('settings from login')
// this.api.get(crm.SETTINGS).subscribe(res => {
// if (res['code'] === '000') {
//
// this.settings = res
// this.dataService.setData('settings', this.settings)
// // this.settingsService.data = this.settings
//
// // toolbar logo
// let mainLogos = document.getElementsByClassName('logo')
// for (let i = 0; i < mainLogos.length; i++) {
// mainLogos[i].setAttribute('src', this.settings.image_id.src)
// }
//
//
// }
// })
// }
setup() {
console.log('testttt', this.settings);
// set toolbar color
let toolbars = document.getElementsByTagName('ion-toolbar');
for (let i = 0; i < toolbars.length; i++) {
toolbars[i].setAttribute(
'style',
`--background: ${this.settings.colours.colour_menu_background}`,
);
}
// toolbar logo
let mainLogos = document.getElementsByClassName('logo');
for (let i = 0; i < mainLogos.length; i++) {
mainLogos[i].setAttribute('src', this.settings.image_id.src);
console.log('wahaha', this.settings.image_id.src);
}
let button = document.getElementsByClassName('login-btn')[0];
button.setAttribute(
'style',
`--background: ${this.settings.colours.colour_button1};
--color: ${this.settings.colours.colour_menu_font}`,
);
console.log('endend');
}
async login(form) {
await this.loadingService.loading();
form.platform = this.device.platform;
form.device_type = this.device.model;
form.platform_token = this.device.uuid;
form.push_token = this.fcmService.pushToken;
console.log('form', form);
await this.api.post(crm.LOGIN, form).subscribe((res) => {
this.loadingService.dismissLoading();
console.log('login', res);
if (res.code === '000') {
console.log('code', res.code);
this.toast.showToast('Login Successful');
//proceed with auth
this.doAuth(res);
} else {
// let message = res.status+':'+res.statusText+'<br/>'+res.error.code+':'+res.error.message
this.alert.showAlert({
header: 'Error: ' + res.error.code,
message: res.error.message,
});
console.log('error', res);
}
});
}
async forgotPassword() {
console.log('do forgot password');
let modal = await this.modalCtrl.create({
component: ForgotPasswordModalPage,
cssClass: 'forgot-password',
});
return await modal.present();
}
doAuth(data) {
console.log('from do auth: ', data);
this.authService.login(data).then((res) => {
if (res) {
this.navCtrl.navigateRoot('/tabs/tabs/home');
console.log('doauth', data);
}
});
}
counter() {
this.counts++;
console.log(this.counts);
if (this.counts >= 8) this.presentPrompt(); //TODO: change to 8
}
async presentPrompt() {
this.counts = 0;
const alert = await this.alertCtrl.create({
header: ' ',
inputs: [
{
name: 'passcode',
placeholder: 'Passcode',
type: 'password',
},
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: (data) => {
console.log('Cancel clicked');
},
},
{
text: 'Ok',
handler: (data) => {
this.api
.getBeforeLogin(crm.SWITCH, null, `?passcode=${data.passcode}`)
.subscribe((res) => {
if (res['code'] == '000') {
this.changeServer();
console.log('Switched');
this.toast.showToast('Switched');
// this.loadingService.dismissLoading();
} else {
this.alert.showAlert({
header: 'Error: ' + res['code'],
message: res['error'],
});
console.log('error', res);
}
});
},
},
],
cssClass: 'alertCustomCss',
backdropDismiss: false,
});
await alert.present();
}
changeServer() {
this.server.switchURL();
switch (this.server.login_url) {
case this.server.login_prod:
this.development = false;
// this.api.url = this.server.prod;
this.server.login_url = this.server.login_prod;
console.log('api url', this.server.login_url);
break;
case this.server.login_dev:
this.development = true;
this.server.login_url = this.server.login_dev;
console.log('api url', this.server.login_url);
break;
}
this.checkDownload();
// Note :
this.getApiDomain('https://oasis.api.app360.my/');
// this.getApiDomain('com.apppay.cohibacustomer');
}
async checkDownload() {
await this.dataService.getStorageData('stats_for_dev').then((res) => {
if (!res) {
let params = {};
if (this.platform.is('android')) {
this.platformName = 'android';
} else if (this.platform.is('ios')) {
this.platformName = 'ios';
} else {
this.platformName = 'web';
}
params['refno'] = moment().format('YYYYMMDDHHmm');
params['data'] = [
{
action_cd: 'install',
user_id: null,
item_id: this.platformName[0], // a for android, i for ios
cnt: 1,
created_ts: moment().format('YYYY-M-D'),
},
];
} else {
console.log('have stats', JSON.parse(res));
}
});
}
async setHome() {
await this.api.get(crm.HOME).subscribe((res) => {
console.log('home>>>>>>>>>>>>>>>>>>>>>>>>> ', res);
this.dataService.setStorageData('home', res);
this.dataService.setData('home', res);
return res;
});
}
async checkToken() {
await this.dataService.getStorageData('member').then((res) => {
if (res != null) {
let token = res ? JSON.parse(res) : null;
token = token['secret'] ? token['secret'] : null;
if (token) {
this.authService.authenticationState.next(true);
if (this.server.url != this.server.check_url) {
this.navCtrl.navigateRoot('/tabs/tabs/home');
}
} else {
this.authService.authenticationState.next(false);
this.navCtrl.navigateRoot('');
}
}
});
}
}
authentication.service.ts
import { Platform, NavController } from "#ionic/angular";
import { Injectable } from "#angular/core";
import { Storage } from "#ionic/storage";
import { BehaviorSubject } from "rxjs";
import { DataService } from "../data/data.service";
import { ObservablesService } from "../observable/observables.service";
import { SplashScreen } from "#ionic-native/splash-screen/ngx";
import { Badge } from "#ionic-native/badge/ngx";
import { ServerService } from "../server/server.service";
const TOKEN_KEY = "auth-token";
export interface OcOAuth {
success: number;
error: any;
data: {
access_token: string;
expire_in: number;
token_type: string;
};
}
#Injectable({
providedIn: "root",
})
export class AuthenticationService {
authenticationState = new BehaviorSubject(false);
constructor(
private storage: Storage,
private plt: Platform,
private dataService: DataService,
private observable: ObservablesService,
private splashScreen: SplashScreen,
private navCtrl: NavController,
private badge: Badge,
private server: ServerService
) {
this.plt.ready().then(() => {
this.checkToken();
});
this.observable.unread().subscribe((res) => {
this.badge.set(res);
console.log("observed unread", res);
});
}
async checkToken() {
await this.storage.get("member").then((res) => {
if (res != null) {
let token = res ? JSON.parse(res) : null;
token = token["secret"] ? token["secret"] : null;
if (token) {
this.authenticationState.next(true);
if (this.server.url != this.server.check_url) {
this.navCtrl.navigateRoot("/tabs/tabs/home");
}
// console.log('server url: ', this.server.url);
//
} else {
this.authenticationState.next(false);
this.navCtrl.navigateRoot("");
}
}
});
}
login(data) {
return this.storage.set(TOKEN_KEY, "Bearer 1234").then(() => {
console.log("auth login", TOKEN_KEY);
this.dataService.setStorageData("member", data);
this.dataService.setData("member", data);
// this.dataService.setStorageData('profile', data.user)
this.observable.user.next(data.user);
this.authenticationState.next(true);
return true;
});
}
logout() {
return this.storage.remove("member").then(() => {
this.badge.clear();
this.authenticationState.next(false);
});
}
isAuthenticated() {
return this.authenticationState.value;
}
}
Firstly your code is so long that can not help with that but i can explain what u must do the concept is when you logged in successfully u must get a token and store that.
After at app openning you must check that stored token. If that token still available u can navigate to main screen. Else u must navigate to ur login page.
login() {
const attempt = login(username,pw)
if(attempt.status === 200) {
//if username and pw is correct web service must be return token
this.storage.set("token", attempt.token)
navigate("where u want")
} else {
//Error when username or pw wrong.
}
If u using ionic u must check ur token in app.component.ts
const token = await this.storage.get("token")
const checkTokenIsAvailable = await checkToken(token)
if(checkTokenIsAvailable) {
navigate("where u want")
//Token is still available
} else {
navigate("login screen")
}
That's all.
In your app.component.ts after platform is ready, add
if(this.authenticationService.isAuthenticated())
{
//Navigate to Home Page
}
else{
//Navigate to Login Page
}
so I was able to solve the issue with the subscribe() method. Inside platfrom.ready I called this
this.authService.authenticationState.subscribe((state) => {
if (state) {
this.navCtrl.navigateRoot("/tabs/tabs/home");
} else {
this.navCtrl.navigateRoot("");
}
});
I am building an application, and I would like to show a progress bar while the user is waiting to be logged-in in the platform.
How can I add a circle progress bar while I am awaiting?
Future<void> validateAndSubmit() async {
if (validateAndSave()) {
try {
final Auth auth = await AuthFactory.getAuth();
final String userId = await auth
.signInWithEmailAndPassword(_email, _password)
.whenComplete(() =>
Navigator.of(context).popAndPushNamed(RootPage.routeName));
print('Signed In:$userId');
} catch (e) {
print('Error:$e');
print(e.toString());
}
}
}
Since you use future, the best way would be to control a CircularProgressIndicator() with a boolean inside your method like this:
Future<void> validateAndSubmit() async {
setState(( {
_isLoading = true;
});
if (validateAndSave()) {
try {
final Auth auth = await AuthFactory.getAuth();
final String userId = await auth
.signInWithEmailAndPassword(_email, _password)
.whenComplete(() =>
{
setState(() {
_isLoading = false;
});
Navigator.of(context).popAndPushNamed(RootPage.routeName));
}
print('Signed In:$userId');
} catch (e) {
print('Error:$e');
print(e.toString());
}
}
}
and then somewhere in your widget tree:
_isLoading ? CircularProgressIndicator() : Other widget...
I have a list which is fetched from the server but when we get outside of the fetching method the list is initialized to default. I have noticed that the problem is with the notifyListeners() as here:
Does notifyListeners() sometimes complete asynchronously?
Interestingly, inside the fetching method the the list is ok.
class Products with ChangeNotifier {
List<Product> _loadedProducts = [];
Future<void> fetchAndSetProducts() async {
try {
var response =
await http.get(StoreServer.serverAddress + '/products.json');
final extractedData = json.decode(response.body) as Map<String, dynamic>;
List<Product> extractedList = [];
extractedData.forEach((key, value) {
_loadedProducts.add(Product(
id: key,
imageUrl: value['imageUrl'],
title: value['title'],
price: value['price'],
description: value['description'],
isFavorite: value['isFavorite']));
});
_loadedProducts = extractedList;
notifyListeners();
await Future.delayed(Duration(seconds: 1));
} catch (error) {
throw error;
}
}
#override
void didChangeDependencies() {
if (!isInit) {
setState(() {
isLoading = true;
});
test = Provider.of<Products>(context);
test.fetchAndSetProducts().then((_) {
print("fetched");
setState(() {
isLoading = false;
isInit = true;
});
});
}
super.didChangeDependencies();
}
You have a logic error. Check my comments..!
class Products with ChangeNotifier {
List<Product> _loadedProducts = [];
Future<void> fetchAndSetProducts() async {
try {
var response =
await http.get(StoreServer.serverAddress + '/products.json');
final extractedData = json.decode(response.body) as Map<String, dynamic>;
List<Product> extractedList = []; // it is an empty list
extractedData.forEach((key, value) {
_loadedProducts.add(Product( // you add elements to _loadedProducts
id: key,
imageUrl: value['imageUrl'],
title: value['title'],
price: value['price'],
description: value['description'],
isFavorite: value['isFavorite']));
});
_loadedProducts = extractedList; // you reassign _loadedProducts to the empty list "extractedList"
notifyListeners();
await Future.delayed(Duration(seconds: 1));
} catch (error) {
throw error;
}
}
Am I right? I think you have that error!