WordPress + Gatsby Custom Rest Route Not Showing in GraphQL - wordpress

I'm fairly new to Gatsby and Im trying to build a site using WP as the content provider. I have a custom rest route built in WP
wp-json/lbt/v1/settings
and right now its just returning
{
"time_and_location": "Testing"
}
I cant seem to find out how to get that route to be available in graphQL for my Gatsby site. I have it set in my includedRoutes as
includedRoutes: [
'/*/*/categories',
'/*/*/posts',
'/**/lbt/**',
'/*/*/events',
'/*/*/pages',
'/*/*/media',
'/*/*/tags',
'/*/*/taxonomies',
'/*/*/menus'
],
I also see this when I spin up Gatsby
-> wordpress__lbt_v1 fetched : 1
-> wordpress__lbt_settings fetched : 1
I've searched a lot of different sites, but I haven't managed to find anything. Any help appreciated.

you need to add custom normalizer in "gatsby-config.js"
like
...
plugins: [
.....,
{
resolve: "gatsby-source-wordpress",
options: {
......
normalizers: normalizers => [ mapCustomApis,...normalizers],
}
}
......
add the "mapCustomApis" normalizer like
const mapCustomApis = {
name: `mapCustomApis`,
normalizer: function({ entities }) {
return entities.reduce((acc, e) => {
return acc.concat(e);
}, []);
}
}
i replicated the code from https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wordpress/src/normalize.js#L102
to support my custom Apis response
make sure your normailzer is before the rest of the normalizers

Related

Nuxt - define static meta tags per site without using SSR

Is it possible to define static meta data for each route in nuxt.config.js?
Suppose there is the following folder structure:
- pages
- examplepage.vue
- loremipsumpage.vue
- index.vue
the following is configured in nuxt.config.js:
head: {
title: 'Hi, I should only be displayed if nothing else is defined!',
meta: [
{ hid: 'description', name: 'description', content: 'Hi, I should only be displayed if nothing else is defined!' },
]
},
the following is configured in examplepage.vue:
head() {
return {
title: "Examplepage",
meta: [
{ hid: 'description', name: 'description', content: 'I wanna be placed in the generated html' },
]
}
},
And yes I know, that works in principle. When calling the page, the title and the meta tags are adjusted by the javascript. But not when generating my static examplepage/index.html file.
The following head is still generated there (dist/examplepage/index.html):
<head>
<title>Hi, I should only be displayed if nothing else is defined!</title>
<meta data-n-head="1" data-hid="description" name="description" content="Hi, I should only be displayed if nothing else is defined!">
.....
Is there a possibility to define fixed meta tags for certain routes which will be considered when generating the static html files? The data is not even dynamic. I only want to define static meta values for static routes.
Important notice:
I know that SSR would solve my problem.
But i would like to continue to run the site as SPA.
I have already tried various configurations in nuxt.config.js. However, all without success. In the Nuxt documentation I have also not found.

gatsby-plugin-google-analytics + Shopify - Conversions not working

I have a Gatsby site sourcing from Shopify, and I'm having a hard time getting the Acquisition Conversions working.
My guess is that when they go to the Checkout page, since it's on Shopify's domain, it sees that as Direct traffic.
My current configuration is:
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: "...",
head: true,
anonymize: false,
respectDNT: false,
allowLinker: true,
},
},
I just added that allowLinker in to test today. Is there anything else I'm missing? I'm not too familiar with analytics I'm just a humble javascript farmer.
Thank you
Google Analytics recently changed their API to version 4 and upon other things, they changed the way the tracking identifier is set to the page. I suppose that the plugins will migrate soon to that changes but in the meantime, this is the only plugin available that works with that new API version: gatsby-plugin-google-gtag. So:
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: `gatsby-plugin-google-gtag`,
options: {
// You can add multiple tracking ids and a pageview event will be fired for all of them.
trackingIds: [
"GA-TRACKING_ID", // Google Analytics / GA
"AW-CONVERSION_ID", // Google Ads / Adwords / AW
"DC-FLOODIGHT_ID", // Marketing Platform advertising products (Display & Video 360, Search Ads 360, and Campaign Manager)
],
// This object gets passed directly to the gtag config command
// This config will be shared across all trackingIds
gtagConfig: {
optimize_id: "OPT_CONTAINER_ID",
anonymize_ip: true,
cookie_expires: 0,
},
// This object is used for configuration specific to this plugin
pluginConfig: {
// Puts tracking script in the head instead of the body
head: false,
// Setting this parameter is also optional
respectDNT: true,
// Avoids sending pageview hits from custom paths
exclude: ["/preview/**", "/do-not-track/me/too/"],
},
},
},
],
}
All the above parameters are optional, just omit them and replace the GA-TRACKING_ID for your real identifier.
I'm not sure if you ever solved it #cYberSport91, but in the year 2021 AD I am trying to do the same. This is what I found:
Place this snippet in your gatsby-ssr.js or gatsby-browser.js:
exports.onRenderBody = ({ setPostBodyComponents }) => {
const attachCode = `
if (ga) {
ga('require', 'linker');
ga('linker:autoLink', ['destination1.com', 'destination2.com']);
}`
setPostBodyComponents([<script dangerouslySetInnerHTML={{
__html: attachCode
}}/>])
}
Source: Gatsby Git Issues
(Still waiting to confirm with my client whether this solution works)

When using WP and Gatsby is it possible to overwrite some auto-generated pages with local custom ones?

Is it possible to ignore a specific route(s) during createPage generation, and instead have a page in the src/pages/ directory take precedence? e.g. I have a route with a number of subpages e.g parent/child1, parent/child2 etc. However, I'm hoping to be able to create a custom page for parent/ in the src/pages directory which would essentially overwrite the auto-generated content from WordPress.
Snippet from gatsby-node.js:
allWordpressPage.edges.forEach(edge => {
if (edge.node.status === 'publish') {
createPage({
path: edge.node.link,
component: slash(pageTemplate),
context: {
id: edge.node.id,
parent: edge.node.wordpress_parent,
wpId: edge.node.wordpress_id,
},
});
}
});
Any help is much appreciated.
Managed to resolve this by just checking for against the appropriate pathname and essentially skipping createPage in that case:
if (edge.node.status === 'publish' && edge.node.link !== 'PATH_NAME_HERE') {
The file specified in src/pages/ will now be used instead.

Creating a NavigationStrategy in Aurelia

I'm trying to use Aurelia as my platform for a custom Wordpress theme.
What I want to do is define my navigation menu in Wordpress, use the Wordpress plugin for menus to expose the menus through the Wordpress API as a JSON string and then building the navigation menu in Aurelia.
Everything I have found so far involves creating a simple one line menu.
Has anyone done this or can point me in the right direction?
Since you're using server-side data to build your navigation menu, you might as well let the server do the hard work and let it generate a ready-to-use configuration for your router.
Let your plugin generate JSON like this:
{
"routes": [
{
"route": "\"...\"",
"moduleId": "\"...\"",
"settings": {
"childRoutes": [
{
"route": "\"...\"",
"moduleId": "\"...\"",
}
]
}
]
}
Then in your root view model's configureRouter you could do something like this:
async configureRouter(config, router) {
const resp = await http.fetch("api/menu-plugin-uri");
const json = await resp.json();
config.map(json.routes);
}
The child routes are stored in the settings object of the config, meaning we can use it for building a navigation menu and we can access it in child routes like so:
configureRouter(config, router) {
const parentConfig = router.parent.currentInstruction.config;
config.map(parentConfig.childRoutes);
}
That doesn't give you nice NavModels with isActive and everything, but this is about as good as it gets when it comes to nested navigation menu's currently.
I'm actually working on a plugin myself to try and address some of these limitations, though NOT ready for production yet.

Angular 2 Router strange null call

Problem
Im loading some menu items from the Wordpress Rest API, then navigate to the page/:id with the correct id of the wordpress page. Everything works fine except of that:
Early when my page is loading I get this null call in the network section of the chrome developer. This is locally, on my server its also a 404 NOT FOUND.
Setup
Angular 2 + Typescript (Angular 2 RC2, Router 3.0.0-alpha.6)
Wordpress REST API
Code
Template
<header></header>
<router-outlet></router-outlet>
<footer></footer>
Routing
export const routes: RouterConfig = [
{ path: '/page/:id', component: PageComponent },
{ path: '/page/home', component: PageComponent, index: true }
];
Header.ts
this.myService.getNavigation()
.subscribe(
menuItems => {
this.menuItems = menuItems;
this.router.navigate(['/page', this.menuItems[0].title]);
},
error => this.errorMessage = <any>error);
Main.ts
bootstrap(AppComponent, [
...APP_ROUTER_PROVIDERS,
...HTTP_PROVIDERS,
...ROUTER_PROVIDERS,
...ENV_PROVIDERS,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
])
Assumption
I guess it has something to do with my routing setup. When I comment out the <router-outlet> it does not happen, everything else works good.
Question
What is this strange call at /null and how can I avoid it?
I guess you have somewhere <img [attr.src]="var"> or similar.

Resources