I am Newbie & exploring the Dato CMS how to use and what it offers and how it can fulfill my use-cases, and I am using REST API Client to get the list of Records available under my Project.
Iâve below Schema Model for my Project:
SEO and Social
Single-line String
Structured Text
Single Asset
Single-line String
Single-line String
Slug
Date
Single Link (References)
when I am using the above-shared JavaScript CMA Client, I am getting below response:
where I am getting the ID of the Uploaded Image for this Single Asset and I am getting similar for SEO Meta which is as below:
"seo_details": {
"image": "Rt7tzv0JRsOE-5LqfpPlyA",
"title": "NPM dv-social-share",
"no_index": false,
"description": "dv-social-share is a powerful npm package for seamless social media sharing integration in Reactjs & Nextjs web app. Simplify sharing with ease!",
"twitter_card": "summary_large_image"
},
here I am getting ID only, and I am thinking to use react-datocms, can anyone help me or guide me how to display this Image in my Remix Project?
The GraphQL API seamlessly handles relationships between item types for you (such as records and images) and lets you fetch exactly the data you need in a single call. For example, to fetch an image alongside other record data: Images and videosâ Content Delivery API â DatoCMS
If youâve never used GraphQL before, weâd encourage you to check it out. There is a very slight learning curve (just an hour or two, I think?) but itâs very helpful for this use case of getting data from a CMS into your frontend.
While itâs possible to do something similar with the REST API as well, it would require several independent calls (such as listing records and then separately fetching their uploads) and then joining all of that back together clientside (typically by ID).
Thanks for your quick help. Iâll look into GraphQL how to use it, and save my time with all this.
I want to ask is like after fetching the Data, how can I show that it to client? I mean in my Remix App, how do I display the content? for that I need to use react-datocms?
Well, thatâs really up to you Thatâs what makes this a âheadlessâ system: itâs entirely up to you how the frontend displays this content. You can render it to raw HTML, or compose complex and beautiful JSX components, or use a UI toolkit like MUI or Chakra.
Some of our bigger customers also choose to implement their own components instead using ours, which is totally fine too if they need more control. But ours should get you a âgood enoughâ implementation for most use cases.
I want to understand one thing, if I am using GraphQL to retrieve the Article, which will retrieve Article + Image associated with it, so itâll be counted as only 1 Request or 2?
like in REST API, itâll be multiple API Calls which will be more than 1 RequestâŚ
because 100k API calls each month are available under the Free Plan, so how itâll be counted for both REST API & GraphQL?
Each network request you send to the CDA or CMA is one call. Thatâs one of the benefits of the GraphQL system: We handle the relationships on our side and you just get the data you need back, in one call. The CMAâs intended purpose is for record updates (it supports writes) and exports. For your frontend, the GraphQL is more suitable (it only supports reads, not mutations, but it will handle the relationships and embedded links and such better).
If youâre trying to stay under the free plan limits for a production site, it would be best to not call the API directly from user browsers (clientside), but to do some sort of server-side fetching & building into static pages. That way youâd only have to make API calls when something actually changes, not on every page load. Frameworks like Next should make that easy. At the very least, you can also do server-side rendering with caching (on a CDN) to at least limit the amount of requests that make it through to our API.
I want to know one more thing that inside of Structured Text how can I add Images? like mostly one after another? because in grid it wonât be possibleâŚ
so is that possible to add multiple Images inside of Structured Text?
like if I tell more clearly so what I want is like, I want to show/display some text, like some heading, some p tags and some bullet points, then show the images (maybe 2 or 3 or maybe 4) and then again show the some texts again.
I want to achieve this, can you please guide or help me how can I do this with Dato CMS?
Iâd probably use Blocks for this. A Block is a DatoCMS term for a repeatable set of fields that you can embed into Structured Text (and modular content fields. That way, you can make a Block with a single-asset (or gallery field), add additional layout information there if needed (as hints for your frontend, e.g. to tell it you want the images âside by sideâ or in a âmosaicâ or âthumbnail galleryâ or whatever).
That way, youâd get a JSON of those images along with your Structured Text, and then after that itâs up to your frontend how to display them.
Does that help? Please me know if you need a fuller example.
@roger Sorry to bother but can you please help me with fuller example? as am quite new to Dato CMS and still learning and exploring the potential of it⌠And Yes, I started a little and Yes it seems quite good.
Also, how can I render this Blocks into my FrontEnd with the use of react-datocms?
I also invited you to a sample project (please check your email) using that example.
Given a record like this: https://forum-5121-remix-blog.admin.datocms.com/editor/item_types/538956/items/19072917 (youâll have to accept the invitation to see it)
Then from that point on, itâs up to your frontend (Remix and the example repo).
Can I ask if this is the kind of setup you were looking for? Iâm just trying to make sure youâre not looking for something more WYSIWYG/no-code/low-code? DatoCMS is a âheadlessâ CMS, so really, the primary thing we provide you is a JSON of your content. How you render that on the frontend is really up to you. Although we do provide JS helper libs for things like Structured Text, thatâs just to assist in parsing them. Rendering the blocks in a particular way is still up to you and your frontend. The Remix example has a very basic example, but if you need more complex layouts than that, youâd either have to use a UI kit (like I mentioned earlier) or write your own CSS to lay them out a certain way.
At that point itâs not really about the CMS at all, but just your frontend (like how youâd display any image, whether from Dato or a local file). Does that make sense?
Yes, I do have checked the Remix Example (GitHub) youâve shared, and based on that only Iâm able to give it a shoot and started with it and created Records and populated over there⌠I just made a little change is that Iâve used fetch() here to get the Records from Dato CMS.
Furthermore, I just accepted the invitation to the sample project youâve shared to me, and in that I just tried to play with the GraphQL Query for Blocks, but in that I am not getting record.__typename: "ImageBlockRecord, or itâll be taken care by react-datocmsâs StructuredText ?
Furthermore, suppose in 1st Image Block Iâve 3-4 Images, how can I identify that itâs a Single Image or Multiple Image together?
Furthermore, I just accepted the invitation to the sample project youâve shared to me, and in that I just tried to play with the GraphQL Query for Blocks, but in that I am not getting record.__typename: "ImageBlockRecord , or itâll be taken care by react-datocms âs StructuredText ?
Iâm not totally sure I understand the question, sorry? In GraphQL, you can either query for the __typename or the modelApiKey (different representations of the same thing):
Then from there you have to tell the frontend how to render it using the custom block renderer.
Furthermore, suppose in 1st Image Block Iâve 3-4 Images, how can I identify that itâs a Single Image or Multiple Image together?
That depends on your schema. If your block only accepts a single image, it will be just that image. You can have multiple blocks one after another, each for one image.
If your block contains a gallery field (for multiple assets) then theyâll be an array.
In either case, youâll have to adjust the frontend to accommodate that.
Basically, to fetch record #1, youâd say first: 1, skip: 0, to fetch the 2nd record itâd be first: 1, skip 1, etc. You just keep track of which record youâre currently on and then skip however many you want.
But in many cases (like going prev/next between blog posts) it may be better to let your frontend router handle that instead, fetching all possible article IDs ahead of time and then passing them to a router so the next/prev links can be hardcoded. That way your users can just directly navigate to the next article instead of waiting for you to do an API lookup.