Develop Reference

Upsert an array of objects using Supabase and Reactjs

I am new to the SQL scene and I am trying to use Supabase for a web app that I am building.
I am trying to push an array objects to the DB, but what I am finding is that it only grabs the first element in the array and adds that to the DB. The end goal functionality is that it grabs the whole array of objects and pushes that and if it detects a change (why I am using upsert) then add that object to the array.
ownedNFTs is an array of objects.
const nakedDB = () => {
try {
setLoading(true);
ownedNFTs.forEach(async (nft) => {
let { data, error, status } = await supabase.from("Users").upsert({
wallet_address: wallet?.accounts[0].address,
NFTS: {
name: nft?.metadata?.name || "",
description: nft?.metadata?.description || "",
image: nft?.metadata?.image || "",
externalUrl: nft?.metadata?.external_url || "",
contractAddress: nft?.contract.address || "",
tokenId: nft?.id.tokenId || "",
blockchain: "Ethereum",
metaverse: nft?.metadata?.name.split(" ")[0] || "",
metadata: nft?.metadata || "",
symbol: nft?.contract.symbol || "",
},
}).eq('wallet_address', wallet?.accounts[0].address);
console.log(data)
if (error && status !== 406) {
throw error;
}
});
} catch (error) {
console.table(error);
} finally {
setLoading(false);
}
};
I have tried following the Supabase documentation on bulkupserting, but that is to create multiple rows at once. I have also tried creating a standard for loop, but that didnt work as well. My current implementation is using forEach() and that is not working as expected.

The problem why it was selecting the first element (I believe) is because the .foreach() function was not running multiple times. This was not a clean way to do a DB call in any case. In addition to that I do think that the data I was sending to the DB was not in the correct format as a pure array of objects. For example when you use .map() it returns two separate objects. Supabase (in my configuration) was not expecting this format.
The solution is below.
I created an empty array
I used .map() on my array of objects
Saved the result of the .map() to the array I created.
Sent the new array to the DB in one call.
const nakedDB = async () => {
try {
ownedNFTs.map((nft) => {
// console.log(nft)
nftArray.push(nft);
});
setLoading(true);
let { data, error, status } = await supabase
.from("Users")
.upsert({
wallet_address: wallet?.accounts[0].address,
NFTS: nftArray,
})
.eq("wallet_address", wallet?.accounts[0].address);
if (error && status !== 406) {
throw error;
}
} catch (error) {
console.table(error);
} finally {
setLoading(false);
}
};
** Updated Solution **
ownedNFTs is already an array of objects in the proper format. I removed the .map() and directly saved ownedNFTs to the DB and it saves all elements. The .map() solution was me over-engineering the issue.

Duplicate array items in Vuex state (using Socket.io)

So I have this app built in Vue and using Vuex. I connect to a Node/Express backend with Socket.Io to be able to push data from the server to client instantly when needed.
The data pushed to the clients are in the form of an object which is then stored in an array in VUEX. Each data object pushed into the array has a unique string attached to it.
This string is used to compare the objects already pushed into the array in VUEX. If there are duplicates they won't be stored. If not equal = they are stored.
I then use ...mapGetters to get the array in Vuex and loop through it. For each object a component is rendered.
HOWEVER - sometimes the same object is rendered twice even though the array in VUEX clearly only shows one copy.
Here is the code in the VUEX Store:
export default new Vuex.Store({
state: {
insiderTrades: [],
},
mutations: {
ADD_INSIDER_TRADE(state, insiderObject) {
if (state.insiderTrades.length === 0) {
// push object into array
state.insiderTrades.unshift(insiderObject);
} else {
state.insiderTrades.forEach((trade) => {
// check if the insider trade is in the store
if (trade.isin === insiderObject.isin) {
// return if it already exists
return;
} else {
// push object into array
state.insiderTrades.unshift(insiderObject);
}
});
}
},
},
getters: {
insiderTrades(state) {
return state.insiderTrades;
},
},
Here is the some of the code in App.vue
mounted() {
// //establish connection to server
this.$socket.on('connect', () => {
this.connectedState = 'ansluten';
this.connectedStateColor = 'green';
console.log('Connected to server');
});
//if disconnected swap to "disconneted state"
this.$socket.on('disconnect', () => {
this.connectedState = 'ej ansluten';
this.connectedStateColor = 'red';
console.log('Disconnected to server');
});
// recieve an insider trade and add to store
this.$socket.on('insiderTrade', (insiderObject) => {
this.$store.commit('ADD_INSIDER_TRADE', insiderObject);
});
},

Your forEach iterates the existing items and adds the new item once for every existing item. Use Array.find:
ADD_INSIDER_TRADE(state, insiderObject) {
const exists = state.insiderTrades.find(trade => trade.isin === insiderObject.isin);
if (!exists) state.insiderTrades.unshift(insiderObject);
},
You don't need the initial length check

ReactJS: Updating array inside object state doesn't trigger re-render

I have a react hooks function that has a state object apiDATA. In this state I store an object of structure:
{
name : "MainData", description: "MainData description", id: 6, items: [
{key: "key-1", name : "Frontend-Test", description: "Only used for front end testing", values: ["awd","asd","xad","asdf", "awdr"]},
{key: "key-2", name : "name-2", description: "qleqle", values: ["bbb","aaa","sss","ccc"]},
...
]
}
My front end displays the main data form the object as the headers and then I map each item in items. For each of these items I need to display the valuesand make them editable. I attached a picture below.
Now as you can see I have a plus button that I use to add new values. I'm using a modal for that and when I call the function to update state it does it fine and re-renders properly. Now for each of the words in the valuesI have that chip with the delete button on their side. And the delete function for that button is as follows:
const deleteItemFromConfig = (word, item) => {
const index = apiDATA.items.findIndex((x) => x.key === item.key);
let newValues = item.value.filter((keyWord) => keyWord !== word);
item.value = [...newValues];
api.updateConfig(item).then((res) => {
if (res.result.status === 200) {
let apiDataItems = [...apiDATA.items];
apiDataItems.splice(index, 1);
apiDataItems.splice(index, 0, item);
apiDATA.items = [...apiDataItems];
setApiDATA(apiDATA);
}
});
};
Unfortunately this function does not re-render when I update state. And it only re-renders when I update some other state. I know the code is a bit crappy but I tried a few things to make it re-render and I can't get around it. I know it has something to do with React not seeing this as a proper update so it doesn't re-render but I have no idea why.

It is not updating because you are changing the array items inside apiDATA, and React only re-render if the pointer to apiDATA changes. React does not compare all items inside the apiDATA.
You have to create a new apiDATA to make React updates.
Try this:
if (res.result.status === 200) {
let apiDataItems = [...apiDATA.items];
apiDataItems.splice(index, 1);
apiDataItems.splice(index, 0, item);
setApiDATA(prevState => {
return {
...prevState,
items: apiDataItems
}
});
}

Using splice isn't a good idea, since it mutates the arrays in place and even if you create a copy via let apiDataItems = [...apiDATA.items];, it's still a shallow copy that has original reference to the nested values.
One of the options is to update your data with map:
const deleteItemFromConfig = (word, item) => {
api.updateConfig(item).then((res) => {
if (res.result.status === 200) {
const items = apiDATA.items.map(it => {
if (it.key === item.key) {
return {
...item,
values: item.value.filter((keyWord) => keyWord !== word)
}
}
return item;
})
setApiDATA(apiData => ({...apiData, items});
}
});
}

How to fix "TypeError: Cannot read property 'node' of undefined" when creating pages programmatically in gatsbyjs

I am trying to create a blog using gatsbyjs, and would like for my blog pages to be created programmatically instead of explicitly creating them in the /src/pages folder.
I am currently trying to query the data from contentful, which I managed to do successfully according to GraphiQL. I followed the steps presented in the documentation for the most part, but I keep on encountering this error whenever my program steps into the ".forEach" function.
exports.createPages=({graphql,actions})=>{
const {createPage}=actions
const blogPost= path.resolve('./src/components/blogComponents/blog-post.js')
return new Promise((resolve,reject)=>{
graphql(`
{
allContentfulBlog{
edges{
node{
slug
}
}
}
}
`).then(results=>{
// console.log(results)
if(results.error){
reject(results.error)
}
// create blog post pages
const posts=results.data.allContentfulBlog.edges
console.log(post)
posts.forEach((post,index)=>{
console.log(`showing slugs: ${posts.node.slug}`)
const previous= index === posts.length-1?null: post[index+1].node
const next= index === 0?null: posts[index-1].node
createPage({
path:post.node.slug,
component:blogPost ,
context:{
slug:post.node.slug,
previous,
next
}
})
})
}).then(resolve)
})
This is the schema of the returned result
"data": {
"allContentfulBlog": {
"edges": [
{
"node": {
"slug": "web-developer-roadmap"
}
},
{
"node": {
"slug": "web-fundamentals-1"
}
}
]
}
}
I expected the "forEach" function to loop through all my blogs and assign the appropriate values the "createPage" function, but instead, it keeps on showing telling me that property of node available in my query is not defined even though I confirmed its presence by logging it to the console as can be seen in the "forEach" function.

The problem with your code it that you are trying to access object like an array
const previous= index === post.length-1?null: post[index+1].node
const next= index === 0?null: post[index-1].node
In the above code, post is single object. i:e { node: {} } and you are accessing it like an array post[index+1].node.
const posts =[
{
node: {
slug: "lorem"
}
},
{
node: {
slug: "ipsum"
}
}
];
posts.forEach((post, i) => {
// post is a single object. To access it's node, you need to use post.node
console.log("current post", post);
// To access the next post based on index
if(i<posts.length-1) {
console.log("Next node", posts[i + 1].node);
}
});
If you want to iterate on the next post based on index, use posts[index-1].node. As well make sure to check index, because for last element, index+1 will throw error.

react redux duplicate keys even when setting a unique key

I have an array of 6 objects which have a uid and nothing else. This is so I can repeat over them and have some placeholder content until an object is ready to be added into the array. I set a unique key when a new object is selected. However if I select the same object twice, even though I'm setting a unique key. It seems to update the unique key on the duplicate item (even though the unique key is different).
Might be easier to see the code/app in action here, an example of the problem would be clicking squirtle then blastoise, take a note of the uid's shown. Then click squirtle again and for some reason it updates the old squirtle with the new squirtles uid causing a duplicate key error. https://codesandbox.io/s/l75m9z1xwq or see code below. Math.random is just placeholder until I can get this working correctly.
const initState = {
party: [
{ uid: 0 },
{ uid: 1 },
{ uid: 2 },
{ uid: 3 },
{ uid: 4 },
{ uid: 5 }
]
};
When I click on something this is triggered:
handleClick = pokemon => {
// setup a uid, will need a better method than math.random later
pokemon.uid = Math.random();
this.props.addToParty(pokemon);
};
This then calls a dispatch which triggers the following reducer. Which essentially just checks if the object has no normal ID then replace the content with the payload sent over. It does this but also somehow updates any previous objects with the same uid even though the if statement does not run against them.
const rootReducer = (state = initState, action) => {
if (action.type === "ADD_POKEMON") {
let foundFirstEmptyPoke = false;
const newArray = state.party.map((pokemon, index) => {
if (typeof pokemon.id === "undefined" && foundFirstEmptyPoke === false) {
foundFirstEmptyPoke = true;
pokemon = action.payload; // set the data to the first object that ios empty
}
// if we get to the last pokemon and it's not empty
if (index === 5 && foundFirstEmptyPoke === false) {
pokemon = action.payload; // replace the last pokemon with the new one
}
return pokemon;
});
return {
party: newArray
};
}
return state;
};

The problem here is that, when you click to select a pokemon, you mutate the data you retrieved from the API:
handleClick = pokemon => {
pokemon.uid = Math.random(); // HERE
this.props.addToParty(pokemon);
};
You actually mutate the react state. What you should do is clone your pokemon data object, add an uid to the clone you just generated and update your redux state with it:
handleClick = pokemon => {
this.props.addToParty({
...pokemon,
uid: Math.random()
});
};
That way, no references to the actual react state are kept. Because that was what was happening when you say it updates the old squirtle with the new squirtles uid. When you tried to add another pokemon, you updated the data you retrieved from your API which was also referenced from your first pokemon slot (from your redux state).

In react/redux it's always better to not mutate objects:
this.props.addToParty({...pokemon, uid: Math.random()});

You are mutating the state. Use spread syntax *** to copy the state before updating.
return {
...state,
party: newArray
}