High Level - Need an Expert Level Person- Wordpress Posts are NOT displayed ( Dont think the solution is easy)

Ionic Framework ionic-v3
1

Wordpress + Woocomerce running on latest
Ionic everything is up to date, resources, plugins, modules, webview ionic pro latest.

I have an app that I am still working on. It works fine with ionic serve -l. No errors. I can pull all categories and products. Works like a charm. I have pretty much everything completed.

I have atlassian bitbucket source control. It triggers the commits and I can see my build in ionic dashboard. SSH and integrations are done and I can trigger the builds and I can export them. I am linked to the app with the given syntax and background pull is working.

There is a slight problem. The xcode build compiles to my device but I see the catch error. Posts can not be loaded although I can see all products and categories. The code is same. The only difference is there is no need for CS and CK keys. The wordpress rest API v2 does not need any keys.

What is the problem. WHy the posts is throwing an error although the rest of it is working?

Where do I start. What do you need me to copy paste? versions, console, errors? let me know I am ready to resolve this. it has been a day I am working on it.

Before hooking up to IONIC dashboard App flow I was able to see the posts in emulate -lc. What went wrong now. Why webview is working fine. I have everything latest. When native IPA is created there is no error, There is no error on ios build and I even tried modern build. What the heck. going crazy now. The way that I implemented is same for products and for posts but posts are not loaded. I can see the rest api URL is correct in my console. I have debugged till the point right after resolve, reject… this.http.get( posturl, httpOptions )with and without httpoptions but NOT WORKING.

2

First thing I want to know is if the endpoint is HTTPS or not. If it’s not, does the problem persist when it is?

3

Yes. Https. The end point is https.
posts https://quikbooze.com/wp-json/wp/v2/posts?page=1
products: https://quikbooze.com/quikbooze-client.php?vendor=4&route=sku&sku=PRD-7821&page=1
SSL is running for multisite wp. This is a multisite wp-wc

4

OK, then the second thing I would do is attach Chrome or Safari to the running app and examine the actual network requests that are going over the wire. Are the posts coming back over the wire? If not, use nc or postman or something to replicate the exact request outside of the Ionic app and see if the response is different.

Do NOT enable any breakpoints or do anything else that interrupts the natural flow of the app, as that can hide subtle race conditions.

5

I have examined the actual network requests in Chrome. The posts are not coming back. I can see the request but the posts are not coming back over the wire.

6

This is my provider
import { Injectable } from ‘@angular/core’;
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import ‘rxjs/add/operator/map’;

/*
Generated class for the Posts provider.

See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI…
*/
@Injectable()
export class PostsProvider {
postdata: any = null;

constructor(
public http: HttpClient
) {}

async load(posturl:string, postpage) {

// set pagination
if( !postpage ) {
  postpage = '1';
}

return await new Promise( (resolve, reject) => {

	var concat;

	// check if url already has a query param
	if( posturl.indexOf('?') > 0 ) {
		concat = '&';
	} else {
		concat = '?';
	}

	const httpOptions = {
    headers: new HttpHeaders({
      //'Content-Type':  'application/json',
      //'Authorization': this.authString
    })
  };

	posturl = posturl + concat + 'page=' + postpage
	this.http.get( posturl, httpOptions )
	    .subscribe(postdata => {
	    
	      this.postdata = postdata;

console.log(‘this postdata geldi’, this.postdata);
resolve(this.postdata);
},
error => {
// probably a bad url or 404
reject(error);
})
});

}

}

THIS IS THE REQUEST
async loadPosts() {
this.postroute = this.configure.url + ‘wp-json/wp/v2/posts’;
console.log(‘post url burda’, this.postroute)
this.postitems = ;
await this.configure.postService.load( this.postroute, this.postpage ).then(postitems => {
let length = postitems[“length”];
for (var i = 0; i < length; ++i) {
this.postitems.push( [postitems[i]] );
}
}).catch((err) => {
console.error(‘Error getting Posts’, Object.keys(err));
});

}

itemTapped(event, item) {

	let opt = {};

	this.navCtrl.push('WooDetailPage', {
	  item: item
	}, opt);
}

postitemTapped(event, item) {

	let opt = {};

	this.navCtrl.push('PostDetailPage', {
	  item: item
	}, opt);
}

categoryTapped(event, item) {

	let opt = {};

	this.navCtrl.push('WooProductsPage', {
	  item: item
	}, opt);
}

AND IN MY CONFIG FILE (not complete file)
…
…
.
.
…import { WooProvider } from ‘…/woo/woo’;
import { LoginProvider } from ‘…/login/login’;
import { RegisterProvider } from ‘…/register/register’;
import { PostsProvider } from ‘…/posts/posts’;
import {App} from ‘ionic-angular’;
import { PostmatesProvider } from ‘…/postmates/postmates’;

constructor(public http: HttpClient, private geolocation: Geolocation, public storage: Storage, public wooProvider:WooProvider, public app: App, public loginProvider: LoginProvider, public registerProvider: RegisterProvider, public postmatesProvider : PostmatesProvider, public postService: PostsProvider) {

9

Comon guys what is this error. Obj.keys retuned this error
2019-12-12 12:36:55.261241-0800 quikbooze[90219:3460775] ERROR: Error getting Posts 0,1,2,3,4,5,6,7 in xcode console

10

I would write this more like so:

posts.provider.ts

export const BASE_URL = new InjectionToken<string>("base url");

export interface Post {
  id: string;
}

@Injectable()
export class PostsProvider {
  private sharedQueryParams = new HttpParams();
  constructor(private http: HttpClient, @Inject(BASE_URL) private baseurl: string) {}
  setSharedQueryParams(sqp: HttpParams) { this.sharedQueryParams = clone(sqp); }
  getPostsByPage(pageno = 1): Observable<Post[]> {
    let qp = clone(this.sharedQueryParams).set("page", pageno);
    return this.http.get<Post[]>(this.baseurl + "/posts", {params: qp});
  }
}

providers in app module

{ provide: BASE_URL, useValue: "https://quikbooze.com/wp-json/wp/v2"},

home.page.ts

export class HomePage {
  pageno = 1;
  posts: Post[] = [];
  constructor(private poster: PostsProvider) {
  }
  fetchPosts(): void {
    this.poster.getPostsByPage(pageno).subscribe(posts => this.posts = posts);
  }
}

home.page.html

<ion-content>
    <ion-list>
        <ion-item *ngFor="let post of posts">
            <ion-label>id: {{post.id}}</ion-label>
        </ion-item>
    </ion-list>
    <ion-item>
      <ion-label>page</ion-label>
      <ion-input [(ngModel)]="pageno"></ion-input>
    </ion-item>
    <ion-button (click)="fetchPosts()">fetch posts</ion-button>
</ion-content>

This works for me given the URL you posted earlier (although I get an error on any page after 1, so I assume there is but one page at the moment). Does it likewise work for you?

11

Did you try this with Deploy Live Updates?

    <variable name="APP_ID" value="94bfd663" />
    <variable name="CHANNEL_NAME" value="Production" />
    <variable name="UPDATE_METHOD" value="background" />
    <variable name="MAX_STORE" value="2" />
    <variable name="MIN_BACKGROUND_DURATION" value="30" />
    <variable name="UPDATE_API" value="https://api.ionicjs.com" />
</plugin>

I can see the post ids in chrome with ionic serve -l. This part is fine.
When I commit/web build and deploy in ionic dashboard for appflow then the posts are not loaded.

After the build…
I goto xcode and build and run the current scheme for simulator or for my device > native-run ios --app platforms/ios/build/device/quikbooze.ipa --device --forward 8100:8100 --forward 35729:35729 --forward 53703:53703

I can see everything is uptodate. Changes applied to the new build(a text change to understand if build is done correctly) but I still can not see the posts

There are no posts. Error is same.

12

Is this when using the code from my previous post?

13

Yes your previous code and my old code both are working fine with ionic serve -l .
I only have problem when deployed

14

I have zero experience with AppFlow, so maybe contacting official support would make sense.

15

Please have a look at the last image. Thats my simulator and the first two is chrome. Only after live deploy I am having this problem. No posts on device.

Well right now it shows fetch posts (your version) but same as my version, posts are not loaded after the click or the other way I did it it,

Screen Shot 2019-12-13 at 12.46.24 PM
Screen Shot 2019-12-13 at 12.46.24 PM962×1402 364 KB
Screen Shot 2019-12-13 at 12.46.17 PM
Screen Shot 2019-12-13 at 12.46.17 PM948×1392 241 KB
Screen Shot 2019-12-13 at 12.43.38 PM
Screen Shot 2019-12-13 at 12.43.38 PM499×920 84.7 KB

16

I will leave you with this observation, which is what motivated me to attempt rewriting your code in order to eliminate what appear to me to be potential sources of unexpected behavior:

  • A successful request to your posts URL asking for page 1 of posts returns an array of several items;
  • A failed request to the same URL asking for page 2 of posts returns an object with named properties such as “headers” and “status”;
  • You are logging the result of calling Object.keys on what your code seems to assume is an error response:
  • The “error” you reported had keys that looked like this:
  • That result is consistent with calling Object.keys on an array containing several items, which led me to wonder if a successful result is being misclassified as an error:
$ ts-node -e 'console.log(Object.keys([{}, {}, {}, {}, {}, {}, {}, {}]))'
[ '0', '1', '2', '3', '4', '5', '6', '7' ]
17

Just one last question. Do you think this is because of the code?

  • It is working properly in safari/chrome etc with serve -l
  • it was working in simulator before the AppFlow settings. -> I have updated everything as it was recommended in documents. In simulator I was able to see the posts when building this since about a month ago.

After the native run I cant see posts.

18

Having no experience or insight about AppFlow, all I can attempt to address is the code.

To my eye, it contains many places that strike me as introducing complexity without associated benefit, including:

  • at least one if not potentially more extra layers of futures, with the explicitly instantiated Promise and async/await scattered all over the place
  • multiple sources of truth with accordant concern for conflict (cf the postdata service property)
  • homebrew conditional query string management
  • lax typing declarations that frustrate understanding of intent
  • oblique use of function returns

To me, debugging is largely about eliminating potential sources of unexpected/undesired behavior, allowing one to zero in on reproducible activity.

You didn’t ask for a code review; I realize I have a reputation here for giving unsolicited and probably frequently unwanted code reviews. Earlier in the thread, I said:

You responded:

I figured I would wait for the results of the bolded part, but what instead ensued was several posts that weren’t that. So I did what I could do given the circumstances, which was to rewrite the code as best I could to eliminate as many potential frivolous sources of problems as I could, in the hope that you would be able to use that alternative version to that end in your environment.

19

rapropos. I just tried something and it’s weird. I have changed the WP rest api end url;

FROM:
//this.postroute = this.configure.url + ‘wp-json/wp/v2/posts’;

TO: This is a php file I am using to restrict access to full rest api. I do this for the entire app. The products are working fine.
this.postroute = this.configure.url + ‘quikbooze-client.php?vendor=4&perpage=30&parent=0&route=categories’

and I was able to see the result. There was no error.

so why ‘wp-json/wp/v2/posts’; is giving error?> :slight_smile: very funny and cant understand. I have checked my wp plugins and there is nothing to cause this error.

20

By the way I have posted the urls earlier: I thought it was clear then my mistake if I didnt answer properly.

https://quikbooze.com/quikbooze-client.php?vendor=4&route=sku&sku=PRD-7821&page=1
https://quikbooze.com/wp-json/wp/v2/posts

And the postman is showing the posts from WP. as you know for postman all we need to do is copy paste the url. There is no authentication.

Code Review? How can we do this? I need programmers to work with me. Where can I hire a programmer/ Do you have time to work on a project like this.

21

Possibly because the response to that URL does not have the proper CORS headers on it, whereas the response to the quikbooze-client.php URL does.

$ printf 'GET /wp-json/wp/v2/posts?page=1 HTTP/1.1\r\nHost: quikbooze.com\r\n\r\n' | ncat --ssl quikbooze.com 443
HTTP/1.1 200 OK
Date: Fri, 13 Dec 2019 23:01:27 GMT
Server: Apache
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
X-Robots-Tag: noindex
Link: <https://quikbooze.com/wp-json/>; rel="https://api.w.org/"
X-Content-Type-Options: nosniff
Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers: Authorization, Content-Type
X-WP-Total: 5
X-WP-TotalPages: 1
Allow: GET
Vary: Origin,Accept-Encoding
Set-Cookie: PHPSESSID=3llvjmht351q0kij6t6ngcthf0; path=/
Set-Cookie: _wcmp_user_cookie_0=wcmp_cookie5df4184914688; expires=Sat, 12-Dec-2020 23:01:29 GMT; Max-Age=31536000; path=/; domain=.quikbooze.com; secure
Upgrade: h2,h2c
Connection: Upgrade
Transfer-Encoding: chunked
Content-Type: application/json; charset=UTF-8

$ printf 'GET /quikbooze-client.php?vendor=4&route=sku&sku=PRD-7821&page=1 HTTP/1.1\r\nHost: quikbooze.com\r\n\r\n' | ncat --ssl quikbooze.com 443
HTTP/1.1 200 OK
Date: Fri, 13 Dec 2019 23:03:26 GMT
Server: nginx/1.17.6
Content-Type: text/html; charset=UTF-8
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Credentials: true
Vary: Accept-Encoding
X-Server-Cache: true
X-Proxy-Cache: MISS
Transfer-Encoding: chunked
22

Yes. the php file as you have posted it has headers and the wp rest api doesnt. But thats the default wordpress rest api which I cant do anything about it so I assume I need to do something here? But this is still weird since I can see with ionic serve -l.
const httpOptions = {
headers: new HttpHeaders({
// ‘Content-Type’: ‘application/json’,
//‘Authorization’: this.authString
})
};