I am using the graphql-request npm package. It is working fine for all page, and post requests, but I am not able to get the menu data.
When I do it within the IDE it returns the data as expected, however, when I call it from the Next.js client it is returning null.
This is the request:
const response = await graphcms.request(`
query MyQuery {
menu(idType: NAME, id: "navbar") {
id
name
menuItems {
nodes {
url
title
label
}
}
}
}
`);
Any ideas what can be causing this to work in the IDE but not fetching on an external request? I did not see any options for settings.
I have discovered this is because menus require locations. Since I had created a theme that simply redirected to my Next deployment, it did not include any menu locations.
You can follow these instructions to add menu locations to a theme:
https://wordpress.org/support/topic/adding-a-new-menu-location/
Related
For a project I am making I will be using a route that looks something like this: collection/id. The server returns an 404 error when the given ID does not exist.
When this happens I would like to push the 404 error page that I have in my router.
{
name: 'notfound',
path: '/:pathMatch(.*)*',
component: () => import('../views/PageNotFoundView.vue'),
}
Now this is achieved by calling the following code: this.$router.push('/notfound');. However, this also changes the URL in the browser which is not something I would want. When reloading the page you should be going to collection/id.
Is there any way to push a navigation route (or component?) without changing the URL displayed?
Example: https://google.com/ajdfkasf doesn't go to https://google.com/404 but rather you keep the link and can refresh it. I could include the component in the view instead of trying to solve this with routes, but that would add overhead to all kinds of views.
I am maintaining a MeteorJS web app and I need to add some specific meta tags into homepage.
I see that there is a head.html in the project that has all information, including
the existing og meta tags, I tried to add the specific meta tag there and restarted the server.
If I right click view source on the homepage, I can see the newly added meta tag.
However, if I try to use Facebook debugger to see what the FB Crawler sees, the newly added meta tag is not seen by the bot. In fact the bot sees some additional twitter meta tags that does not exist anywhere in the project.
Investigating further, I noticed the project uses a library called
manuelschoebel:ms-seo: https://github.com/DerMambo/ms-seo
This library is initialised in the Meteor.startup like this:
Meteor.startup(function() {
if(Meteor.isServer){
if(Meteor.DEBUG){
robots.addLine('Disallow: /');
}
robots.addLine('Disallow: /admin');
}
if(Meteor.isClient){
// default SEO
return SEO.config({
title: '...',
meta: {
"description": "..."
},
og: {
'image': '....'
}
});
}
Now I am guessing this SEO library is the reason why the bot does not see the newly added meta tag in the head.html.
What is the right way to add the newly meta tag in a clean way? why is this SEO library not respecting the head.html in the project?
We built a simple blog using Next.js and noticed that none of the changes we're making on the CMS (headless wordpress) are reflected on the dynamic pages. For example we updated all the author names and although the changes show up correctly on the blog landing page, the dynamic pages are not reflecting this change (i've tried different browsers and incognito window). I understand that next.js builts these pages when deploying but if this would then mean we'd have to re-deploy everytime we make even a small udpate to the conten on the backend.
Your static pages are fetched when built. But Next.js does have an option for refreshing them on the fly.
Try revalidate options in getStaticProps (https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation)
export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every second
revalidate: 1, // In seconds
}
}
They say that it's ISR approach (https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration)
I'm looking for a solution (guess it has to be a wordpress plugin) in order to solve a problem.
I'm publishing lots of sites with WP - some of them have internal links (already inserted via html) to pages which aren't published yet.
My goal is that these links are not "active" from the point of publishing the URL (because then they would result in a 404 since the direction site is not online yet). I'd rather like them to be somehow inactive or deactivated until the "target" of the link is published.
I tried broken link checker but it doesn't work.
Regards
Something like this should work. Ideally you would have some way to change the wrapping class once you know all the links should work so that this happening forever. Replace #content and www.yourdomain.com with the appropriate values. Also I'm assuming that you have jQuery loaded already since this is a wordpress site. Also if you're using ES6 then convert to using let/const and arrow functions if you want.
jQuery(function ($) {
$(document).ready(function() {
$('#content').find('a[href*="www.yourdomain.com"]').each(checkLinkStatus(this));
});
function checkLinkStatus(linkObject) {
var link = $(linkObject).attr('href');
$.ajax({
type: 'HEAD',
url: link,
success: function () {
// page exists
},
error: function () {
$(linkObject).attr('href', '#');
}
});
}
});
I am looking for a way to modify the links on my Wordpress site so it tracks all my 3rd party links.
I was able to find some help with the, how to create the correct tracking code in Google Analytics, but the second part of the process is to add some specific link attributes.
Here is the example which they suggest I replicate:
<'a href="www.blog-hosting-service.com/myBlog" onclick="_gaq.push(['_link', 'www.blog-hosting-service.com/myBlog']); return false;">View My Blog
Does anyone know where I can insert this code link attributes so I can collect the external clicks via Google Analytics?
JQuery would be the best way in my opinion.
// start by getting the current page path (the one you are sending to tracker)
var pathname = window.location.pathname;
// ready handler to change the links on hosts not equal to location host
$(document).ready(function() {
$('a[href^="http://"]').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).click(function(e) {
_gaq.push(['_link', pathname]);
});
});