Develop Reference

(hashlips_art_engine-1.1.2_patch_v5) The "path" argument must be of type string. Received undefined

I'm trying to update some metadata for 10 JSON files, some of them get updated properly and some others give me the following error.
Below you can see 6 files give me errors and 4 files are correctly updated.
error:TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
error:TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
error:TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
error:TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
error:TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
error:TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
5.png uploaded & 5.json updated!
4.png uploaded & 4.json updated!
1.png uploaded & 1.json updated!
7.png uploaded & 7.json updated!
This is the node.js code im using:
onst FormData = require('form-data');
const fetch = require('node-fetch');
const path = require("path");
const basePath = process.cwd();
const fs = require("fs");
fs.readdirSync(`${basePath}/build/images`).
forEach(file => {
const formData = new FormData();
const fileStream = fs.createReadStream(`${basePath}/build/images/${file}`);
formData.append("file", fileStream);
let url = 'https://api.nftport.xyz/v0/files';
let options = {
method: 'POST',
headers: {
Authorization: 'SecretApiCode',
},
body: formData
};
fetch(url, options)
.then(res => res.json())
.then((json) => {
const fileName = path.parse(json.file_name).name;
let rawdata = fs.readFileSync(`${basePath}/build/json/${fileName}.json`);
let metaData = JSON.parse(rawdata);
metaData.file_url = json.ipfs_url;
fs.writeFileSync(`${basePath}/build/json/${fileName}.json`,
JSON.stringify(metaData, null, 2));
console.log(`${json.file_name} uploaded & ${fileName}.json updated!`);
})
.catch(err => console.error('error:' + err));
});
I have 10png files:
1.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
10.png
And 10 JSON files
1.json
2.json
3.json
4.json
5.json
6.json
7.json
8.json
9.json
10.json

The issue in your code seems to be with fetching the URL.
This is proven as sometimes, your code fails with an error, and sometimes, it works successfully.
What might be happening is that sometimes, when you are fetching the data from the URL, it might not have the file_name property (because of an error, etc.)
When you are trying to parse the path with the below method:
path.parse(json.file_name);
The file_name might be undefined as there might not be such a key. And, as path.parse() can't parse undefined, it returns an error, saying that in only accepts strings (shown below).
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
There are many possible solutions, so they are listed below.
Add a check for if file_name is available. If it isn't, then don't try parsing it with path.parse(). You can use the code below to check it (in the second .then() method).
if (!json.file_name) {
console.error("Error fetching file name.");
return;
}
If your API supports it, check if there is an error in the response body. Assuming that the error will be something like .error, you can use the code below for guidance (add it in the second .then() method).
if (!json.file_name && json.error) {
console.log(json.error.message);
return;
}
There may be many other (better) solutions then these, but these solutions are just to give you a starting point.
Solution 1 and 2 are very similar, but they work under different circumstances.

Try this. You can also find it in codeSTACKr/create-10k-nft-collection" git repository if you change tag to v1.2.0.
This is in uploadfiles.js
const FormData = require("form-data");
const fetch = require("node-fetch");
const path = require("path");
const basePath = process.cwd();
const fs = require("fs");
const AUTH = 'Your API KEY GOES HERE';
const TIMEOUT = 1000; // Milliseconds. Extend this if needed to wait for each upload. 1000 = 1 second.
const allMetadata = [];
async function main() {
const files = fs.readdirSync(`${basePath}/build/images`);
files.sort(function(a, b){
return a.split(".")[0] - b.split(".")[0];
});
for (const file of files) {
const fileName = path.parse(file).name;
let jsonFile = fs.readFileSync(`${basePath}/build/json/${fileName}.json`);
let metaData = JSON.parse(jsonFile);
if(!metaData.file_url.includes('https://')) {
const response = await fetchWithRetry(file);
metaData.file_url = response.ipfs_url;
fs.writeFileSync(
`${basePath}/build/json/${fileName}.json`,
JSON.stringify(metaData, null, 2)
);
console.log(`${response.file_name} uploaded & ${fileName}.json updated!`);
} else {
console.log(`${fileName} already uploaded.`);
}
allMetadata.push(metaData);
}
fs.writeFileSync(
`${basePath}/build/json/_metadata.json`,
JSON.stringify(allMetadata, null, 2)
);
}
main();
function timer(ms) {
return new Promise(res => setTimeout(res, ms));
}
async function fetchWithRetry(file) {
await timer(TIMEOUT)
return new Promise((resolve, reject) => {
const fetch_retry = (_file) => {
const formData = new FormData();
const fileStream = fs.createReadStream(`${basePath}/build/images/${_file}`);
formData.append("file", fileStream);
let url = "https://api.nftport.xyz/v0/files";
let options = {
method: "POST",
headers: {
Authorization: AUTH,
},
body: formData,
};
return fetch(url, options).then(async (res) => {
const status = res.status;
if(status === 200) {
return res.json();
}
else {
console.error(`ERROR STATUS: ${status}`)
console.log('Retrying')
await timer(TIMEOUT)
fetch_retry(_file)
}
})
.then(async (json) => {
if(json.response === "OK"){
return resolve(json);
} else {
console.error(`NOK: ${json.error}`)
console.log('Retrying')
await timer(TIMEOUT)
fetch_retry(_file)
}
})
.catch(async (error) => {
console.error(`CATCH ERROR: ${error}`)
console.log('Retrying')
await timer(TIMEOUT)
fetch_retry(_file)
});
}
return fetch_retry(file);
});
}

Context is undefined in translation module

I tried to add a call to an endpoint in order to get translation. I have like this :
const loadLocales = async () => {
const context = require.context('./locales', true);
const data = await ApiService.post(`${translationToolUrl}/gateway/translations`, { project: 'myProject' });
const messages = context.keys()
.map((key) => ({ key, locale: key.match(/[-a-z0-9_]+/i)[0] }))
.reduce((msgs, { key, locale }) => ({
...msgs,
[locale]: extendMessages(context(key)),
}), {});
return { context, messages };
};
const { context, messages } = loadLocales();
i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'en',
silentFallbackWarn: true,
messages,
});
if (module.hot) {
module.hot.accept(context.id, () => {
const { messages: newMessages } = loadLocales();
Object.keys(newMessages)
.filter((locale) => messages[locale] !== extendMessages(newMessages[locale]))
.forEach((locale) => {
const msgs = extendMessages(newMessages[locale]);
messages[locale] = msgs;
i18n.setLocaleMessage(locale, msgs);
});
});
}
I added this request : ApiService.post. But I have the error TypeError: context is undefined droped at this line module.hot.accept(context.id.... Have you an idea how I can solve that ? My scope was to add this request in order to get translations from database and from .json files for now. I want to do a merge between both for now, in the feature I will get only from database but this will be done step by step.

The problem is, that you trying to declare multiple const in the wrong way, independently of trying to declaring them twice. This shows in:
const { context, messages } = loadLocales();
This would couse context and messages to be undefined. This won´t give an error, as I replicated in a small example:
const {first, second} = 'Testing'
console.log(first)
console.log(second)
Both, first and second, will be undefined. If you try to declare multiple const at once, you need to do it this way:
const context = loadLocales(), messages = loadLocales();

Generator function with yields

I'm trying to do a generator function with yield inside a Redux saga.
I'm trying to get a value from my endpoint ind function g1 by calling function g2. Don't know id this is the right way to do it. I only want to get data from my endpoint if isTranslatable is true.
But fore some reason I get a response undefined. What am I missing. And yes I'm new at this.
service file
export const fetchEnglishFilterValue = async (
countrySelectorCountry: string,
selectedFilter: string,
selectedFilterValue: string,
): Promise<Response> => {
const url = `${DONORS_SERVICE_URL}/api/donors/translate/${countrySelectorCountry}/${selectedFilter}/${selectedFilterValue}`;
return get(url);
};
saga file
export function* g1() {
const englishFilterValue = g2(selectedFilter.key, selectedFilter.value);
console.log(isTranslatable ? englishFilterValue : "normal value");
console.log(englishFilterValue.next().value);
}
export function* g2(filterKey: string, filterValue: string) {
try {
const response: Response = yield call(fetchEnglishFilterValue, appSettings.language, filterKey, filterValue);
console.log("response: ", response);
const data: string = yield call([response, response.json]);
console.log("data: ", data);
return data;
} catch {
error(`Getting english filter value for datalayer. countrySelectorCountry: ${appSettings.language}, selectedFilter: ${filterKey}, selectedFilterValue: ${filterValue}`);
return undefined;
}
}

Strange query bug with Next js, Knex, and SWR

Using Next API routes and Knex + MySQL, and using React and SWR for fetching, I get a strange bug. If a request fails, my queries start appending , * to the select statement, resulting in SQL syntax errors. For example, the query should use select *, but comes out as select *, * and then select *, *, * and so on. Does anyone have any idea why this might happen?
SWR fetch:
export const swrFetcher = async (...args) => {
const [url, contentType = 'application/json'] = args;
const res = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': contentType,
},
});
if (!res.ok) throw new Error(res.statusText);
const json = await res.json();
return json;
};
const { data, error } = useSWR('/api/user/me', swrFetcher, {
revalidateOnFocus: false,
revalidateOnReconnect: false,
revalidateOnMount: true,
});
knex query:
const User = knex(TABLE_NAMES.user);
export const readById = (id) => User.select('*').where({ id });

You probably need to create the knex instance within the function call and not reuse the same every time, like it's currently happening.
export const readById = (id) => {
const User = knex(TABLE_NAMES.user);
return User.select('*').where({ id });
}

How to compose/pipe functions when dealing with objects?

Say I have a Request object:
{
user: { /* user data: username, email, etc. */ }
post: { /* post data: content, date, etc. */ }
}
Example of a Request object:
{
user: {
id: '123'
username: 'kibe'
email: 'blabla#gmail.com'
}
post: {
content: 'my new post!'
date: '20/02/2004'
}
}
Now, I have two functions: validateUser and validatePost. Both of them return a Maybe monad, because they might fail.
How can I then do something like this?
function savePost (request) {
return request
|> validateUser // if validateUser returns either Success(user) or Failure(error), how would I pass down the post?
|> validatePost
|> savePostToDb
|> ok
}
Should I create a function validateRequest which composes validateUser and validatePost? But then, how would I only give the post object to savePostToDb? What if savePostToDb also requires the user ID?
function savePost (request) {
return request
|> validateRequest // returns an Either monad
|> savePostToDb // only requires user ID and the post, how would I pass these down?
|> ok
}
Hopefully these questions make sense. I am new to FP and although I am understanding its paradigms, I am failing to design a simple program
Thanks!

prop
We write a simple prop function which safely looks up properties on your object. If they are present, we get a Just-wrapped value, otherwise we get Nothing -
const fromNullable = x =>
x == null
? Nothing
: Just(x)
const prop = k => t =>
fromNullable(t[k])
props
You have nested properties though, so let's make it so we can dig arbitrarily deep into your object using any sequence of props -
const props = (k, ...ks) => t =>
ks.length
? prop(k)(t).bind(props(...ks))
: prop(k)(t)
validate
Now we can write a simple validate coroutine -
function* validate (t)
{ const id = yield props("user", "id")(t)
const username = yield props("user", "username")(t)
const email = yield props("user", "email")(t)
const post = yield props("post", "content")(t)
const date = yield props("post", "date")(t)
return Just({ id, username, email, post, date }) // <- Just(whateverYouWant)
}
const doc =
{ user:
{ id: '123'
, username: 'kibe'
, email: 'blabla#gmail.com'
}
, post:
{ content: 'my new post!'
, date: '20/02/2004'
}
}
coroutine(validate(doc)).bind(console.log)
With a valid doc we see -
{
id: '123',
username: 'kibe',
email: 'blabla#gmail.com',
post: 'my new post!',
date: '20/02/2004'
}
With an invalid document, otherdoc -
const otherdoc =
{ user:
{ id: '123'
, username: 'kibe'
, // <- missing email
}
, post:
{ content: 'my new post!'
, // <- missing date
}
}
coroutine(validate(otherdoc)).bind(console.log)
// no effect because validate returns a Nothing!
coroutine
Implementation of coroutine is simple and most importantly it is generic for any monad -
function coroutine (f)
{ function next (v)
{ let {done, value} = f.next(v)
return done ? value : value.bind(next)
}
return next()
}
Maybe
Lastly we supply implementation for Nothing and Just -
const Nothing =
({ bind: _ => Nothing })
const Just = v =>
({ bind: f => f(v) })
demo
Expand the snippet below to verify the results in your own browser -
const Nothing =
({ bind: _ => Nothing })
const Just = v =>
({ bind: f => f(v) })
const fromNullable = x =>
x == null
? Nothing
: Just(x)
const prop = k => t =>
fromNullable(t[k])
const props = (k, ...ks) => t =>
ks.length
? prop(k)(t).bind(props(...ks))
: prop(k)(t)
function coroutine (f)
{ function next (v)
{ let {done, value} = f.next(v)
return done ? value : value.bind(next)
}
return next()
}
function* validate (t)
{ const id = yield props("user", "id")(t)
const username = yield props("user", "username")(t)
const email = yield props("user", "email")(t)
const post = yield props("post", "content")(t)
const date = yield props("post", "date")(t)
return Just({ id, username, email, post, date })
}
const doc =
{user:{id:'123',username:'kibe',email:'blabla#gmail.com'},post:{content:'my new post!',date:'20/02/2004'}}
coroutine(validate(doc)).bind(console.log)
related reading
How do pipes and monads work together in JavaScript?
Ramda: Fold an object
How should i sort a list inside an object in functional programming with different logic based on different condition?
Sort objects in array with dynamic nested property keys

Yes you should create validateRequest and a savePostToDb Methodes which give you a boolean back. Then you can simple create two Maybe-Functions with thos two new methodes and compose it togheter. Look at my example how I would do it simple:
// Here some simple Left/Right to Just and Nothing (Maybe)-Monade function to work with
const Left = x => f => _ => f(x);
const Right = x => _ => g => g(x);
const Nothing = Left();
const Just = Right;
// your maybe-validateRequest function
const maybeValidateRequest = request =>
validateRequest(request)
? Just(user)
: Nothing
// your maybe-postToDb function
const maybePostToDb = request =>
savePostToDb(request)
? Just(request)
: Nothing
// and finally compose those two maybes and do the postRequest finally
const savePost = request =>
maybeValidateRequest(request)
(() => console.error("Validation failed"))
(_ =>
maybePostToDb(request)
(() => console.error("Save to DB failed")))
(_ => postRequest(request)) // when it's everything passed,the postRequest can be safely made