Pull shopify image files - reactjs

I have been banging my head against the wall trying to work out how to use graphQL, to pull the images and then place them on the customer website. I am using the framework Hydrogen which is built for shopify. Now I have tried a few things. I have tried and use a package to fix my option, but the problem I am having is grabbing the images. I really dont want to make a sepreate database. I am happy with the shopify, but as stated at the start. I have no clue how to get them image files.
As said at the top I have tried using the GraphQL but cant pull from the database of shopify

Related

React Native Data Base

Ok... I am so confused. I am new to React Native and I have created a simple mobile app that shows a list of news (containing a specific image, title, and description). I have a lot of experience with programming most of which comes from game development. I have created many games and I am familiar to cloud storage systems that you update and retrieve data.
Right now I just have a local json file with an array of 'news' Objects and then I loop through this array to show the news posts. Basically, I want to move this json file to somewhere online where the app just retrieves it. This would make it so that the News json file could be edited in order to change, add or remove new news. So, I don't need account or anything. I don't even need to be able to set/update data from the app. I just need a place to store images and files that can be retrieved from the app.
I have tried using the common react native data base systems like sqlite, realm, mongodb, and firebase, but must not understand how they work because they make no sense. Also, it seems like when making a mobile app all of these services require you to setup a backend and start a server, which from what I can tell doesn't work on mobile... It seems logical that there would be a global data base that I could store storage on and just receive it by a simple fetch or network call. Am I totally crazy here ?:) Any help or guidance is super appreciated. Thanks.

What is the best design for a react website that will need to load large data files

I am building a react website, where many of the pages will be d3 data visualizations. I'm loading large data files (each ~5MB of csv or json) for these visualizations.
My folder structure for one of these pages is something like this:
-src/
--pages/
---vis1/
----app.js
----styles.scss
----bigdata.csv
----otherdata.json
Then, in app.js I can just import data from './bigdata.csv'; and use it in the component. This is working alright currently, but I have no idea how this design will scale in the future. I may end up needing even larger data files, and I also have plans to include hundreds of photos eventually. Should I be sticking this stuff in a database and writing server-side code? AWS cloud storage? Something else? I have no idea how any of that works, so I'm trying to figure out if it makes sense to learn.
Most of the react tutorials I've seen deal with little if any data loading. Blogs and posts specifically about design/data like this, or this, or this haven't really helped either.
My suggestion is, if you dont have to import all of them then, you should solve with backend side. Store your data in backend, then fetch when you need (lazy loading). You can do with pagination(like data tables) or scroll(like social media main pages)

React Native Music Database MP3

Hi everyone I'm in need of some help here with React Native &/or Expo.
The brief version: I built the UI for a streaming app idea of mine. My problem now is finding a way to add content on it!
How can I add music files or MP3 & Videos on React Native (preferably Expo)?
Is there such free database out there or would I have to build something to pass the data to the app itself?
The long version: I had an idea to build a Hybrid Streaming App including music, videos and live events. Now this is my first time building an app ever. I managed to get the UI done in 4 months.
Again I've never done this before so don't crucify me. I managed to use flatlist to create categories which represent: music, videos, podcast, and live events. In those flatlist I passed data which are the artist, image, album & more. I even was able to create a player screen and actually play some random audio file using "Expo-av" using a link. Right now, I'm stuck and still trying to find a way to get an actual library on the app while also figuring out how to pass data from one thing to the next. PLEASE HELP
I'm not sure if there's a good white-label service that would provide metadata and streaming audio/video. Something like MusicBrainz offers an API for metadata, but I don't think they provide audio. There may be companies out there that offer what you're looking for, as I understand it, but licensing for major label music is notoriously thorny, so there may not be a ton of companies that give you drop-in access to something like Spotify's library. If you want people to upload media, you can use something like AWS Amplify to integrate a backend without having to do a lot of devops work.

Client side or Server Side - React (App for a customer)

i have a quick question, so i just built 3 websites for customers using React and they're all deployed and working but now one of these customers is asking me how they can update its content, all the website are stored either on one or many JS files after building them with npm run build and configured with webpack, how should i build a website where customers plan to change either texts or add new images? the websites have a couple of map functions to display many pictures or card based on products, so everytime theres a change i have to go through the react files and change them build it again and deploy them which seems pretty static to me even though React is supposed to work with components and make it dynamic, what would be the best approach and/or tools to build a website where a customer can change a .JS file with text in Cpanel file manager, or just add pictures to a directory in Cpanel file manager and have it render automatically, i was thinking that i should make it server side so i can avoid having to re build and re upload everytime that there are changes, bu what would be the best options besides React to make it dynamic, Should i use node, express??
Thank you so much for your time !
One of the options could be Contentful API, you can store all of your data there and add permission to your customer to edit the repo. This will make it easier to change the content that you mentioned: "the websites have a couple of map functions to display many pictures or card based on products". So what you will do is simply fetch data from the API and render it on your website, this will allow your Customers to CRUD the content of your website, without your intervention. It is pretty easy to use, you can find out more about it here: https://www.contentful.com/developers/docs/.
Regarding the content of the website itself, e.g pages, texts on pages, and other static stuff that does not depend on actual data, but it's only a part of your code, I think it could be hard to manage without you coding it manually. If there is an exact part of content data that is going to be changed, you could make a new Admin page, where the user will be able to change the content and data on your website, and in this could you will have to add some back-end (node, express, etc). But what you're describing is actually CMS which is really popular nowadays you might want to take a look at some of them:
https://www.wix.com/
https://wordpress.com/
But if the Texts that you've mentioned are just a part of models e.g You have a product with something like this:
const product = {
productName: 'name',
price: '100',
image: 'img',
avialable: false,
}
and clients want to change productName, price, image, avialability then Contentful is pretty sufficient for you. If you will need some help with this Platform you can DM me I will try to help you.

Deploying GatsbyJS on Nginx Digital Ocean

So, I have a GatsbyJS website done. And I need some clarification on how to proceed.
So what I want to do:
Create a blog with GatsbyJS using Contentful as my CMS. Each time I add something on Contentful, my website will query data from Contentful and update in website.
So where I'm stuck:
I'm unsure of how to approach the last part. I ran gatsby build and it came out with production html files which I have successfully deployed on my server and it works with the current entries on Contentful.
But, this is different from what I wanted because, I have new entries on Contentful that I wish for it to be updated on my website.
Is there a way for me to update my website each time I create a new entry on Contentful. Or must I do the build each time I create a new entry.
Thanks!
The solution to this is to set up web hooks. You can define these in Contentful and when some one publishes content requests will be made to a server you define.
I'm not sure what Digital Ocean offers but when you have a CI server/service (Travis, Circle) in place, it will re-build your site with fresh data after receiving a hook. :)

Resources