We Keep Coding

How to import a list from other .js file to my main.js file?

This is just an example from Ania kubow's Climate change API.
My question is : i have a list like this but it is more larger and long. I want to store that list in another file like "exampleList.js" then i want to import it to my main.js file.
const newspapers = [
{
name: 'cityam',
address: 'https://www.cityam.com/london-must-become-a-world-leader-on-climate-change-action/',
base: ''
},
{
name: 'thetimes',
address: 'https://www.thetimes.co.uk/environment/climate-change',
base: ''
},
{
name: 'guardian',
address: 'https://www.theguardian.com/environment/climate-crisis',
base: '',
},
{
name: 'telegraph',
address: 'https://www.telegraph.co.uk/climate-change',
base: 'https://www.telegraph.co.uk',
},
{
name: 'nyt',
address: 'https://www.nytimes.com/international/section/climate',
base: '',
},
{
name: 'latimes',
address: 'https://www.latimes.com/environment',
base: '',
},
]
Then i want to call it here instead of writing it in the same file (main.js) i dont want the code to look messy and too long. Actually i have more lists (probably 3 lists each has more than 100 address, base, name) i want to store them in different files.
app.get('/news/:newspaperId', (req, res) => {
const newspaperId = req.params.newspaperId
const newspaperAddress = newspapers.filter(newspaper => newspaper.name == newspaperId)[0].address
const newspaperBase = newspapers.filter(newspaper => newspaper.name == newspaperId)[0].base
axios.get(newspaperAddress)
.then(response => {
const html = response.data
const $ = cheerio.load(html)
const specificArticles = []
$('a:contains("climate")', html).each(function () {
const title = $(this).text()
const url = $(this).attr('href')
specificArticles.push({
title,
url: newspaperBase + url,
source: newspaperId
})
})
res.json(specificArticles)
}).catch(err => console.log(err))
})
I have tried to create a list file then i tried the statement import:
import exampleList from (./src/exampleList.js)
it says that i need to add "type": "module" to my package.json. i did that but it still not working, it says that i cannot import a statement from module . i also tried to run the app with .mjs and --node-experimental ... same thing, not working.

Firstly, make sure you are exporting the list that you have. Also, I recommend to store the data in a JSON format.
Secondly, regarding the error that you are facing
add "type": "module" to package.json
check out the main answer on this question

const newspapers = ["hello"]; module.exports = newspapers;
use this to export your data from the file and
use const newspaper = require("./src/exampleList") to import the file and can use the data in the other file.

Programatically generating Gatsby pages without a slug from Graphql

I have set up an ACF options page in WordPress called Projects
Inside the Projects options page there is an ACF repeater allowing the user to add multiple Projects.
In Gatsby, I’m using Graphql to query the data for my Projects in two files:
Inside a custom hook, allowing access to the data globally in my Gatsby site
Inside a gatsby-node.js file in order to generate a slug for my template page called project-details.js
Obviously there is no slug in Graphql for this repeater field in the ACF options page. Instead, I’m generating a slug based on a nested Title text field that’s found inside each Project repeater field.
I’m using both the replaceAll() and toLowerCase() methods to create the slug and then making it available as part of my data.
Here's my custom hook:
export const useProjectsQueryAlt = () => {
const data = useStaticQuery(graphql`
query ProjectsQueryAlt {
wp {
projects {
projects {
allprojects {
projectContent
projectTitle
featuredImage {
mediaItemUrl
id
}
projectGallery {
caption
id
mediaItemUrl
}
}
}
}
}
}
`)
const project = data.wp.projects.projects.allprojects.map(node => {
const { projectContent, projectTitle, featuredImage, projectGallery } = node;
const title = node.projectTitle;
const spacesToHyphen = title.replaceAll(' ', '-');
const slugFromTitle = spacesToHyphen.toLowerCase()
return {
projectContent,
projectTitle,
slug: slugFromTitle,
featuredImage,
projectGallery: projectGallery.map(node => {
const { caption, id, mediaItemUrl } = node;
return {
caption,
id,
mediaItemUrl
}
})
}
})
return { project }
}
Here's my gatsby-node file:
const path = require('path')
exports.createPages = async ({ graphql, actions }) => {
const { data } = await graphql(`
query Projects {
wp {
projects {
projects {
allprojects {
projectTitle
}
}
}
}
}
`)
data.wp.projects.projects.allprojects.forEach(node => {
const title = node.projectTitle;
const spacesToHyphen = title.replaceAll(' ', '-');
const slugFromTitle = spacesToHyphen.toLowerCase()
actions.createPage({
path: '/projects/' + slugFromTitle,
component: path.resolve('./src/templates/project-details.js'),
context: { slug: slugFromTitle },
})
})
}
Here's my template file project-details.js
import React from 'react'
function ProjectDetails() {
return (
<div>
...my page template content
</div>
)
}
export default ProjectDetails
I now need to find a way to check that the two appended slugs match in my ‘project-details.js’ template file in order to display the relevant project data to the corresponding URL.
Seeing as I’ve generated my slugs on the front end, following the Gatsby Docs for setting up dynamically generate pages doesn’t align with my use case. I was hoping somebody has had experience with this use case and can point me in the right direction.

The problem in your approach is that you are generating a "fake" slug based on the title of the project so you can't use that field to filter any GraphQL node because the field is not present in the project fields. Your best option is using the title itself or using any autogenerated identifier (id, if it's present as a field).
actions.createPage({
path: '/projects/' + slugFromTitle,
component: path.resolve('./src/templates/project-details.js'),
context: { title },
})
Note: you can omit { title: title }
You can still use the path of your generated slug, this is a valid approach.
I'm assuming that if the title is a unique field, the slug must be too, hence you will be a valid filter.
Now in the project-details.js:
import React from 'react'
function ProjectDetails({ data }) {
console.log("my data is", data);
return (
<div>
...my page template content
</div>
)
}
export const query = graphql`
query($title: String!) {
yourACFNode(title: { eq: $title} ) {
# your fields
}
}
`
export default ProjectDetails
Of course, tweak the query above to match your ACF node but get the approach.

Gatsby category slugs not working from dynamic category page

In my gatsby-node.js I create dynamic Category pages:
exports.createPages = async ({ graphql, actions: { createPage } }) => {
const {
data: { projects, categories },
} = await graphql(`
query Projects {
projects: allGraphCmsProject(filter: { stage: { eq: PUBLISHED } }) {
nodes {
id
slug
}
}
categories: allGraphCmsCategory {
nodes {
id
slug
}
}
}
`);
projects.nodes.forEach(({ id, slug }) => {
createPage({
path: `${slug}`,
component: path.resolve('./src/templates/ProjectPage.tsx'),
context: { id, slug },
});
});
categories.nodes.forEach(({ id, slug }) => {
createPage({
path: `/category/${slug}`,
component: path.resolve('./src/templates/CategoryPage.tsx'),
context: { id },
});
});
};
Inside src/templates/CategoryPage.tsx I render a CategoryList.tsx component.
In the browser on the page /category (src/pages/category.tsx), I render also the list categories (CategoryList.tsx component). When I click a category from this page it's working fine and it shows a url like /category/category-one and shows the categorie page in the browser.
But then if I click another category (from within a category page (src/templates/CategoryPage.tsx), I get an url like /category/category-one/category-two?

But then if I click another category (from within a category page
(src/templates/CategoryPage.tsx), I get an url like
/category/category-one/category-two?
Your page generation looks good, except some unnecessary template literals:
projects.nodes.forEach(({ id, slug }) => {
createPage({
path: slug, // before was path: `${slug}`,
component: path.resolve('./src/templates/ProjectPage.tsx'),
context: { id, slug },
});
});
Your issue appears because you are missing an initial slash (/) at the beginning of the to props of the <Link> component.
On your category page:
<Link to={`/${slug}`}/>{categoryName}</Link>
Note: I don't know your page structure but the goal is to add an initial slash.
This is because slug, may come or not with an initial slash. If it doesn't, it will concatenate the current URL to the slug itself, like an anchor (<a>) normally does.

CraftCMS Gatsby project throwing error "GraphQL Error Expected type [String], found {eq: $slug}."

I just started working with Gatsby to see if it would be a good choice to rebuild my company's CraftCMS website with Craft as the backend and Gatsby as the frontend. So far everything has been working well until it came time to query for the individual entries inside our "campaign" channel.
For the record, I have been able to render a complete list using .map() for each of my campaign entries on a "overall view" page to see all the campaigns. I have also been able to recursively build out each campaign page so that it calls my /src/templates/campaign-page.js template and has the correct slug pulled from my site's Craft API with no issue. For some reason, I just can't get my individual campaign data to query inside the campaign-page.js template.
I've read just about every page in the Gatsby docs and every tutorial that currently exists, but for the life of me I can't figure out why my GraphQL query will not filter for my individual campaign entries. It just keeps telling me, "GraphQL Error Expected type [String], found {eq: $slug}."
I've also tried wrapping my "slug: {eq: $slug} in a "filter:" based on some markdown docs, but that just tells me "filter" does not exist. I'm beginning to think the issue is in my gatsby-node.js file, but I'm not seeing any issue when I compare it to the docs.
Gatsby-node.js
const path = require(`path`)
exports.createPages = async ({ actions, graphql }) => {
const { data } = await graphql(`
query {
api {
entries(section: "campaigns") {
slug
}
}
}
`)
data.api.entries.forEach(({ slug }) => {
actions.createPage({
path: "/campaigns/" + slug,
component: path.resolve(`./src/templates/campaign-page.js`),
context: {
slug: slug,
},
})
})
}
Campaign-page.js
export default ({data}) => {
const post = data.api.entries
return(
<div className={"campaign-page-single"} style={{marginTop: '-21px,'}}>
<Header/>
<div>
<h1>{post.id}</h1>
</div>
</div>
)
}
export const campaignQuery = graphql`
query ($slug: String!){
api{
entries (slug: { eq: $slug }){
slug
id
... on API_campaigns_campaigns_Entry {
id
campaignTitle
slug
}
}
}
}
`
For reference, here's what a typical working query looks like on my main campaigns.js page that lists all available campaigns:
query = {graphql`
{
api {
entries(section: "campaigns") {
... on API_campaigns_campaigns_Entry {
id
campaignTitle
uri
slug
}
}
}
}
`}
I expect my /src/templates/campaign-page.js template to render the individual campaign data.

I finally had one of my coworkers take a look at my code. All I had to do was wrap my $slug variable in brackets as so:
entries (section: "campaigns", slug: [$slug] )
That's two days I wish I could have back.

gatsby-source-wordpress: localFile field null on images in ACF fields on netlify deploy

I'm using the gatsby wordpress plugin to retrieve my posts from my hosted WP site. Locally, gatsby build works fine and all my ACF fields are retrieved. However, on my Netlify deploy the property local file seems to be null. With other fields ACF fields being retrieved correctly.
Here is my GraphQL query:
{
allWordpressPost {
edges {
node {
id
wordpress_id
date
guid
modified
slug
status
type
link
title
content
acf {
description
title
icon
link
image{
slug
title
localFile{
childImageSharp{
sizes{
sizes
}
resolutions{
srcSet
src
}
}
}
source_url
link
}
}
}
}
}
}
I have already implemented the nullify function fix in my Wordpress function file referred to in this ticket:
function nullify_empty($value, $post_id, $field)
{
if (empty($value)) {
return null;
}
return $value;
}
add_filter('acf/format_value_for_api/type=text', 'nullify_empty', 100, 3);
add_filter('acf/format_value_for_api/type=image', 'nullify_empty', 100, 3);
add_filter('acf/format_value_for_api/type=repeater', 'nullify_empty', 100, 3);
I have spotted where the build logs differ on Netlify when compared to my local log. This is where I think the issue lies:
Whereas locally it only show the following for the same warning:
:
And here an example of the ACF fields being logged on Netlify build log. Notice the localfile property:
My Gatsby environment:
System:
OS: macOS Sierra 10.12.6
CPU: x64 Intel(R) Core(TM) i7-6700HQ CPU # 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.8.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 68.0.3440.106
Firefox: 59.0
Safari: 11.1.2
npmPackages:
gatsby: ^1.9.167 => 1.9.277
gatsby-image: ^1.0.55 => 1.0.55
gatsby-link: ^1.6.31 => 1.6.32
gatsby-pagination: ^1.1.0 => 1.1.0
gatsby-plugin-catch-links: ^1.0.14 => 1.0.14
gatsby-plugin-feed: ^1.3.15 => 1.3.15
gatsby-plugin-google-analytics: ^1.0.14 => 1.0.15
gatsby-plugin-manifest: ^1.0.10 => 1.0.12
gatsby-plugin-netlify: ^1.0.21 => 1.0.21
gatsby-plugin-netlify-cms: ^2.0.1 => 2.0.1
gatsby-plugin-nprogress: ^1.0.9 => 1.0.9
gatsby-plugin-offline: ^1.0.12 => 1.0.12
gatsby-plugin-react-helmet: ^1.0.2 => 1.0.8
gatsby-plugin-sharp: ^1.6.48 => 1.6.48
gatsby-plugin-sitemap: ^1.2.7 => 1.2.9
gatsby-plugin-twitter: ^1.0.14 => 1.0.14
gatsby-remark-autolink-headers: ^1.4.10 => 1.4.11
gatsby-remark-copy-linked-files: ^1.5.23 => 1.5.25
gatsby-remark-images: ^1.5.34 => 1.5.36
gatsby-remark-prismjs: ^1.2.24 => 1.2.24
gatsby-remark-responsive-iframe: ^1.4.16 => 1.4.16
gatsby-source-filesystem: ^1.5.10 => 1.5.11
gatsby-source-wordpress: ^2.0.93 => 2.0.93
gatsby-transformer-json: ^1.0.14 => 1.0.14
gatsby-transformer-remark: ^1.7.44 => 1.7.44
gatsby-transformer-sharp: ^1.6.27 => 1.6.27
npmGlobalPackages:
gatsby-cli: 1.1.58
gatsby-config.js:
const config = require("./data/SiteConfig");
const pathPrefix = config.pathPrefix === "/" ? "" : config.pathPrefix;
module.exports = {
pathPrefix: config.pathPrefix,
siteMetadata: {
siteUrl: config.siteUrl + pathPrefix,
rssMetadata: {
site_url: config.siteUrl + pathPrefix,
feed_url: config.siteUrl + pathPrefix + config.siteRss,
title: config.siteTitle,
description: config.siteDescription,
image_url: `${config.siteUrl + pathPrefix}/logos/logo-512.png`,
author: config.siteRssAuthor,
copyright: `${config.copyright.label} © ${config.copyright.year ||
new Date().getFullYear()}`
}
},
plugins: [
"gatsby-plugin-react-helmet",
{
resolve: `gatsby-source-wordpress`,
options: {
/*
* The base URL of the Wordpress site without the trailingslash and the protocol. This is required.
* Example : 'gatsbyjswpexample.wordpress.com' or 'www.example-site.com'
*/
baseUrl: `hiddenForSO`,
// The protocol. This can be http or https.
protocol: `http`,
// Indicates whether the site is hosted on wordpress.com.
// If false, then the asumption is made that the site is self hosted.
// If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
// If your site is hosted on wordpress.org, then set this to false.
hostingWPCOM: false,
// If useACF is true, then the source plugin will try to import the Wordpress ACF Plugin contents.
// This feature is untested for sites hosted on Wordpress.com
useACF: true,
excludedRoutes: ["/*/*/comments", "/yoast/**"],
normalizer: function({ entities }) {
return entities;
},
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {
// Class prefix for <pre> tags containing syntax highlighting;
// defaults to 'language-' (eg <pre class="language-js">).
// If your site loads Prism into the browser at runtime,
// (eg for use with libraries like react-live),
// you may use this to prevent Prism from re-processing syntax.
// This is an uncommon use-case though;
// If you're unsure, it's best to use the default value.
classPrefix: "language-",
// This is used to allow setting a language for inline code
// (i.e. single backticks) by creating a separator.
// This separator is a string and will do no white-space
// stripping.
// A suggested value for English speakers is the non-ascii
// character '›'.
inlineCodeMarker: null,
// This lets you set up language aliases. For example,
// setting this to '{ sh: "bash" }' will let you use
// the language "sh" which will highlight using the
// bash highlighter.
aliases: {},
},
},
],
},
},
"gatsby-transformer-json",
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 710
}
},
{
resolve: "gatsby-remark-responsive-iframe"
},
"gatsby-remark-prismjs",
"gatsby-remark-copy-linked-files",
"gatsby-remark-autolink-headers"
]
}
},
{
resolve: "gatsby-plugin-google-analytics",
options: {
trackingId: config.googleAnalyticsID
}
},
{
resolve: "gatsby-plugin-nprogress",
options: {
color: config.themeColor
}
},
"gatsby-plugin-sharp",
"gatsby-plugin-catch-links",
'gatsby-transformer-sharp',
"gatsby-plugin-twitter",
"gatsby-plugin-sitemap",
{
resolve: "gatsby-plugin-manifest",
options: {
name: config.siteTitle,
short_name: config.siteTitle,
description: config.siteDescription,
start_url: config.pathPrefix,
background_color: config.backgroundColor,
theme_color: config.themeColor,
display: "minimal-ui",
icons: [
{
src: "/logos/logo-192x192.png",
sizes: "192x192",
type: "image/png"
},
{
src: "/logos/logo-512x512.png",
sizes: "512x512",
type: "image/png"
}
]
}
},
{
resolve: `gatsby-plugin-netlify`,
options: {
headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria
mergeSecurityHeaders: true, // boolean to turn off the default security headers
mergeLinkHeaders: true, // boolean to turn off the default gatsby js headers
mergeCachingHeaders: true, // boolean to turn off the default caching headers
transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths
},
},
]
};
gatsby-node.js:
const path = require("path");
const _ = require("lodash");
const fs = require("fs");
const webpackLodashPlugin = require("lodash-webpack-plugin");
const siteConfig = require("./data/SiteConfig");
const {
createPaginationPages,
createLinkedPages
} = require("gatsby-pagination");
exports.createPages = ({ graphql, boundActionCreators }) => {
const { createPage } = boundActionCreators;
return new Promise((resolve, reject) => {
const indexPage = path.resolve("src/templates/index.jsx");
const postPage = path.resolve("src/templates/post.jsx");
const tagPage = path.resolve("src/templates/tag.jsx");
const categoryPage = path.resolve("src/templates/category.jsx");
const authorPage = path.resolve("src/templates/author.jsx");
resolve(
graphql(
`
{
allWordpressPost {
edges {
node {
id
wordpress_id
date
guid
modified
slug
status
type
link
title
content
acf {
description
title
icon
link
team_photo: image{
slug
title
localFile{
childImageSharp{
sizes{
sizes
}
resolutions{
srcSet
src
}
}
}
source_url
link
}
}
}
}
}
}
`
).then(result => {
if (result.errors) {
/* eslint no-console: "off" */
console.log(result.errors);
reject(result.errors);
}
// Creates Index page
createPaginationPages({
createPage,
edges: result.data.allWordpressPost.edges,
component: indexPage,
limit: siteConfig.sitePaginationLimit
});
// Creates Posts
createLinkedPages({
createPage,
edges: result.data.allWordpressPost.edges,
component: postPage,
edgeParser: edge => ({
path: edge.node.slug,
context: {
slug: edge.node.slug,
id: edge.node.id,
}
}),
circular: true
});
_.each(result.data.allWordpressPage.edges, edge => {
// Gatsby uses Redux to manage its internal state.
// Plugins and sites can use functions like "createPage"
// to interact with Gatsby.
createPage({
// Each page is required to have a `path` as well
// as a template component. The `context` is
// optional but is often necessary so the template
// can query data specific to each page.
path: `/${edge.node.slug}/`,
component: slash(pageTemplate),
context: {
id: edge.node.id,
},
})
})*/
})
);
})
};
exports.modifyWebpackConfig = ({ config, stage }) => {
if (stage === "build-javascript") {
config.plugin("Lodash", webpackLodashPlugin, null);
}
};

Workaroud limit the concurrent download
"GATSBY_CONCURRENT_DOWNLOAD=5 gatsby develop"
works for gatsby build too,
From this