We Keep Coding

Gatsby: Re-execute page queries manually

Do you know if it's possible to re-execute Gatsby page queries (normal queries) manually?
Note, This should happen in dev mode while gatsby develop runs.
Background info: I'm trying to set up a draft environment with Gatsby and a Headless CMS (Craft CMS in my case). I want gatsby develop to run on, say, heroku. The CMS requests a Gatsby page, passing a specific draft-token as an URL param, and then the page queries should be re-executed, using the token to re-fetch the draft content from the CMS rather than the published content.
I'm hooking into the token-request via a middleware defined in gatsby-config.js. This is all based on https://gist.github.com/monachilada/af7e92a86e0d27ba47a8597ac4e4b105
I tried
createSchemaCustomization({ refresh: true }).then(() => {
sourceNodes()
})
but this completely re-creates all pages. I really only want the page queries to be extracted/executed.

Probably you are looking for this. Basically, you need to set an environment variable (ENABLE_GATSBY_REFRESH_ENDPOINT) which opens and exposes a /__refresh webhook that is able to receive POST requests to refresh the sourced content. This exposed webhook can be triggered whenever remote data changes, which means you can update your data without re-launching the development server.
You can also trigger it manually using: curl -X POST http://localhost:8000/__refresh
If you need a detailed explanation of how to set .env variables in Gatsby just tell me and I will provide a detailed explanation. But you just need to create a .env file with your variables (ENABLE_GATSBY_REFRESH_ENDPOINT=true) and place this snippet in your gatsby-config.js:
require("dotenv").config({
path: `.env.${activeEnv}`,
})
Of course, it will only work under the development environment but in this case, it fits your requirements.

Rebuild for all is needed f.e. when you have indexing pages.
It looks like you need some logic to conditionally call createPage (with all data refetched) or even conditionally fetch data for selected pages only.
If amount (of pages) is relatively not so big I would fetch for all data to get page update times. Then in loop conditionally (time within a few minutes - no needs to pass parameter) call createPage.
If develop doesn't call 'createPage' on /__refresh ... dive deeper into gatsby code and find logic and way to modify redux touched nodes.
... or search for other optimization techniques you can use for this scenario (queried data cached into json files?).

React ES6 App - Local API calls

I can't for the life of me figure this out, it seems like it should be straight forward but it's just not clicking.
I have an ES6 app that I created using create-react-app. I've got all the templates and layouts set up for the project and came to trying to pull in data from an API that I want to sit inside the app - like a botched MVC where React handles the views and I run the models and controllers in PHP.
So I have a function in one of my components that I want to fetch some data. I use the fetch() function (I know this isn't yet compatible with a number of browsers but that's a problem for another day) to fetch a relative path from the component to the model I want to load, however the fetch function treats my path as a call to the base URL followed by the request. So with the site running on localhost:3000, I run the following code in my getData() function...
let test = fetch('../models/overall-stats.php').then(function(response) {
console.log(response);
return response;
});
...the URL that fetch hits is then http://localhost:3000/models/overall-stats.php which simply resolves back to the index.html file and loads the app, rather than the PHP file I'm requesting.
If I need to hit that PHP file to get my data, am I wrong in using fetch? Or am I just using it incorrectly? If I shouldn't be using fetch what's a better approach to this problem I'm having?
When I run this on an apache server (after building and deploying) I can get the fetches to work fine (apache recognizes the structure of the URL and hits it as I am expecting) and I hit the file no issues, but I need to be able to work in a local development environment and have the same functionality. The app will end up being deployed live on an apache server.
Any help would be greatly appreciated.

I knew after sleeping on this it would be very straight-forward... I simply had to move my models and controllers into the public directory for them to be accessible. I'll be putting in authentication to the models so that they can't be hit directly, but only through GET requests.

Why don't you just use something like ${baseUrl}/models/... ?
Also for solving browsers problem with fetch you can import the Polyfill or simply use axios (my choice)!

Maybe you can try to use ajax to get or post the data from server, just like this:
$.ajax({
url: '../models/overall-stats.php',
data: {
},
type: 'GET',
dataType : 'json',
success : function(res){
let obj = parseJSON(res)
}
})
or add this on top in your php file because the CORS :
header('Access-Control-Allow-Origin: *');

Mirage `passthrough` is not working

I'm trying to use passthrough for a POST request in this Ember project
this.passthrough('/thirdeye/entity?entityType=ANOMALY_FUNCTION');
This is what the call looks like in app/mirage/config.js.
I got the following error:
Mirage: Your Ember app tried to POST '/thirdeye/entity?entityType=ANOMALY_FUNCTION',
but there was no route defined to handle this request.
Define a route that matches this path in your
mirage/config.js file. Did you forget to add your namespace?
Clearly, I've added that call to the config file, but it's not being picked up. I read that passthrough only works for >= jquery 2.x, which my project is.
Does anyone know what else could cause this?

I found out the problem was I had to do this.passthrough('/thirdeye/***'); since the call has query params. It works now.

Phonegap will not delete data from mongodb (mongolab)

I have built a small phonegap app in backbone.js which connects to a mongodb backend(hosted on mongolab) I can successfully retrieve and add to collections using the following url in my Backbone.Collection:
url: 'https://api.mongolab.com/api/1/databases/site_manager/collections/items?apiKey=****************'
but when I try to delete a model from the collection it does not remove it from the db. I have set the urlRoot of my model with an /:id attribute:
urlRoot : 'https://api.mongolab.com/api/1/databases/site_manager/collections/items/:id?apiKey=**********************'
but it still doesn't seem to be working - I'm not sure if i've put the id attribute in the right place. Everything works locally with a local server/db so I'm sure it has to do with the URL. Can anyone help with this please?
I am aware of security risks of accessing my db directly from the clientside with the API key but htis is just for a quick prototype.
Thanks

Have you tried to use Fiddler or
other tool that will allow you to monitor the HTTP requests and the returned status code that your application makes? At least you will be able to define where is problem.

AngularJS html5mode and hard 404

I have a AngularJS app working with html5mode set to true.
Currently, the app shows a soft 404 page, with the .otherwise setting in the router.
Is there a way I could serve actual 404 HTTP response, for the sake of SEO while using html5mode?

If I understand correctly what you want, you have to do the following:
hard redirect the browser (bypassing the angular routing) on the otherwise path, with something like this:
$routeProvider
.otherwise({
controller: function () {
window.location.replace('/404'); // your custom 404 page
// or a non existing page
}
});
if you have a regular single-page-application where all the server request are redirected to the same SPA entry point, you have to configure on your server to make a routing exception for your custom 404 page, which will should also be served with a 404 status.
Otherwise, I can't see how you would do that with just History API, without an external request, because it's whole point in angular routing is to bypass external requests.
If you just want non-existing routes to return 404, then you must configure your server to match all your angular routes, and return 404 otherwise.

Seach engines works with SPA applications through prerendered pages, using _escaped_fragment_ . And you can use Prerender.io (or simply PhantomJS) to generate any status codes for search engines, like this https://prerender.io/documentation/best-practices
But this schema is deprecated by Google: http://googlewebmastercentral.blogspot.ru/2015/10/deprecating-our-ajax-crawling-scheme.html At this moment Google tries to understand your JS with usual crawling schema.
Hard redirection to 404.html page is not a good practice: url must stay the same, like https://stackoverflow.com/somepage
You can try Angular2 with server rendering feature: https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUrUxcnwhBGS0EXbVlYicY/edit

You have to make your server issue 404s. Angular cannot help in anyway here.