API – die besten Beiträge

Verwandte Themen
JanMarcel01
04.07.2024, 19:54
Mit Links

NextJS Server Component aktualisiert API-Daten nicht?

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

HTML, JavaScript, Framework, Webentwicklung, API, Frontend, React, node.js, TypeScript
1 Antwort
linuxlara
06.01.2023, 18:13
Mit Links

Flutter Data from API?

Hey, will Daten von meiner erstellten API ausgeben in meiner App.

Code:

fetchData() async {
    final response = await http.get(Uri.parse('http://localhost/list.json'));
    return json.decode(response.body);
  }

FutureBuilder(
            future: fetchData(),
            builder: (BuildContext context, AsyncSnapshot snapshot){
              if(snapshot.hasError){
                return Center(
                  child:Text("Error"),
                );
              }
              if(snapshot.hasData){
                return ListView.builder(
                  itemCount: snapshot.data.length, 
                    itemBuilder: (BuildContext context, int index){
                  return Row(
                    children: [
                      Expanded(
                        child: Container(
                        child: Column(
                          children: [
                            Text(snapshot.data[index]['id']),
                            SizedBox(height: 10,),
                            Text(snapshot.data[index]['name']),
                            
                          ],
                        ),
                        ),
                      ),
                    ],
                  );
                });
              }
              return Center(child: CircularProgressIndicator(),);
            },
          ),

Jedoch bekomm ich als Ausgabe "Error". Woran kann das liegen? Die API kann ich mit Postmann abfragen.

App, Technik, programmieren, iOS, Android, Dart, Entwicklung, MySQL, Programmiersprache, Rest, Softwareentwicklung, API, localhost, app entwicklung, Flutter
2 Antworten

Meistgelesene Beiträge zum Thema API

Mehr meistgelesene Fragen zu API