Get help on Discord

Discussion on importing a link from a database to a project using Next.js and client.fetch

12 replies
Last updated: Jul 28, 2022
Hey guys! I want to import a link from my database to the project. What is the easiest and quickest way to do it?
AI Update

The easiest and quickest way to import data into your Sanity project depends on what you're importing, but here are your main options:

If you have data in NDJSON format (newline-delimited JSON), the CLI import command is your fastest route:

sanity dataset import <file> <targetDataset>

For example:

sanity dataset import my-data.ndjson production

Key things to know:

  • Each line in your NDJSON file should be a complete JSON document
  • Documents need a _type field (and optionally an _id)
  • For images/files, use the special _sanityAsset property: "image@file:///path/to/image.jpg" or "image@https://example.com/image.jpg"
  • You can import .ndjson files or .tar.gz archives (which include assets)

Useful flags:

  • --replace - Overwrites existing documents with the same _id
  • --missing - Only creates documents that don't exist yet
  • --allow-failing-assets - Continues import even if some assets fail

Run sanity dataset import --help to see all options.

Alternative: Using a Client Library

If you need more control or are importing from a custom source, you can use the Sanity JavaScript client with methods like client.create() or client.createOrReplace().

Important considerations when using the client:

  • Implement rate limiting (max 25 requests/second)
  • Use transactions for multiple mutations
  • Set visibility mode to deferred for large imports
  • Upload assets first, then reference them in documents

For a single link/document, you could also just create it directly in Sanity Studio if it's a one-off!

What type of data are you looking to import? That'll help determine the best approach.

This doesnt seem to work:
const query = ‘*[ _type == “users” ]{linkTree, walletAddress}’ client.fetch(query)
console.log(linkTree)
client.fetch
returns a promise. You need to 
.then
it or 
await
it.
user F
I was able to console.log and it’s reading it ✨✨✨. Now I need to send it to the link statement so the user can access the custom link
To where ‘/’ is displayed
Mornin’ Sanity! Hope you guys are doing well. Can someone check this thread and help me to figure how to export the fetch to the statement?
It’s going to depend a lot on which framework you’re using.
user F
I’m using next.js right now. I have tried everything and nothing is really working at all.
Alright, in Next.js you’d do your query in 
getStaticProps
and you would pass down the props to your component.
user F
did you look at the NextJS docs and tutorials? They are really good 😉
As an example from their
data fetching site :
// A very useful library 😉
import { groq } from "next-sanity";


// this 👇 is your page
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.

// This is your data fetching 👇
export async function getStaticProps() {

  // You would use groq here to get your sanity data
  const res = await fetch(YOUR_QUERY)
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog
Hope that helps
🙂
I actually used these tutorials and they really helped me with understanding it. However I had to do a little bit of a mix with another method because for some reason it was giving me an undefined, so I put what’s supposed to be ‘getStaticProps()’ under a class and then on a useEffect.
Thank you
user F
user J
superstars 🔥🔥

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?