fetch in app router / server actions

[white ledge]

How would I do the following in Next JS App Router and Next Server Actions?

To set up a per-tenant structure in a TypeScript + NextJS App Router application code using Turso, you won't directly manipulate databases through the CLI as your primary means. Instead, you'll interact with the Turso Platform API for operations such as creating the parent (schema) database and child databases. You'll then use the Client SDK to interact with these databases from your application.

Step 1: Create Parent Database (Schema)
This step involves creating a schema database using the Platform API. You'll need to make a POST request to create the parent database with the is_schema field set to true.

// POST request to create the parent (schema) database
fetch('https://api.turso.tech/v1/organizations/{organizationName}/databases', {
method: 'POST',
headers: {
'Authorization': Bearer YOUR_API_TOKEN,
'Content-Type': 'application/json'
},
body: JSON.stringify({
"name": "parent-db",
"group": "default",
"is_schema": true
})
});

[marsh radish]

Hi @white ledge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

I'm sorry, but the knowledge sources provided do not contain information on how to set up a per-tenant structure in a TypeScript + NextJS App Router application using Turso, or how to interact with the Turso Platform API. The sources also do not provide information on how to make a POST request to create a parent database with the is_schema field set to true.

However, in general, to make a POST request in Next.js, you can use the fetch API. Here's a basic example:

fetch('/api/your-endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key: 'value'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => {
  console.error('Error:', error);
});

Please refer to the official Next.js documentation (https://nextjs.org/docs/api-routes/introduction) for more information on how to use API routes in Next.js.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@white ledge kapa.ai is still learning and improving, please let us know how it did by reacting below

[white ledge]

@marsh radish to do a fetch in Next JS App Router is there a better way to make use of Server Actions to do this?

[marsh radish]

Let me check the knowledge base for you. One moment! :books:

---

Yes, in Next.js App Router, you can use Server Actions to handle data fetching and mutations. Server Actions are asynchronous functions that are executed on the server and can be used in both Server and Client Components.

Here's a basic example of how you can use Server Actions in your Next.js application:

export async function action() {
  const res = await fetch('<https://api.example.com/...'>)
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}

In this example, the fetch request is made within the Server Action. If the request is successful, the data is returned; otherwise, an error is thrown.

Server Actions can be invoked from event handlers, useEffect, third-party libraries, and other form elements like <button>. They integrate with the Next.js caching and revalidation architecture, meaning when an action is invoked, Next.js can return both the updated UI and new data in a single server roundtrip.

Please note that Server Actions use the POST method, and only this HTTP method can invoke them. The arguments and return value of Server Actions must be serializable by React.

For more information on Server Actions, you can refer to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: