everything works in postman, there is probably a cache problem somewhereclient:// TestAPI component import axios from 'axios'; import React, { useEffect, useState } from 'react'; const TestAPI = () => { const [quote, setQuote] = useState({ text: "Loading...", reference: "" }); useEffect(() => { const getQuote = async () => { try { const response = await axios.get(/api/randomverse?timestamp=${new Date().getTime()}); const data = response.data; setQuote({ text: data.text, reference: data.reference }); } catch (error) { console.error("Error fetching quote:", error); setQuote({ text: "Failed to load quote", reference: "" }); } }; getQuote(); }, []); return ( {quote.text} {quote.reference} ); }; export default TestAPI;server: // pages/api/randomVerse.js import { NextResponse } from "next/server"; export async function GET(req,res) { try { const response = await fetch("https://bible-api.com/?random=verse"); if (!response.ok) { throw new Error("Network response was not ok"); } const data = await response.json(); const nextResponse = NextResponse.json(data); nextResponse.headers.set( "Cache-Control", "no-cache, no-store, must-revalidate" ); return nextResponse; } catch (error) { console.error("Server Error fetching quote:", error); } }

after the refresh, the data from the api will not change

Answered

Bombay-duck posted this in #help-forum

Bombay-duckOP

2024-01-14T11:41:30.000Z

everything works in postman, there is probably a cache problem somewhere
client:

// TestAPI component
import axios from 'axios';
import React, { useEffect, useState } from 'react';

const TestAPI = () => {
  const [quote, setQuote] = useState({ text: "Loading...", reference: "" });

useEffect(() => {
const getQuote = async () => {
try {
 const response = await axios.get(

/api/randomverse?timestamp=${new Date().getTime()}

);
const data = response.data;
setQuote({ text: data.text, reference: data.reference });
} catch (error) {
console.error("Error fetching quote:", error);
setQuote({ text: "Failed to load quote", reference: "" });
}
};
getQuote();
}, []);

return (
<div className="flex flex-col items-center justify-center lg:w-[30rem] w-[20rem]">
<h1 className="font-bold text-2xl mt-8 mb-4 text-center font-barlow">
{quote.text}
</h1>
<p className="italic">{quote.reference}</p>
</div>
);
};

export default TestAPI;

server:

// pages/api/randomVerse.js
import { NextResponse } from "next/server";

export  async function GET(req,res) {
  try {
    const response = await fetch("https://bible-api.com/?random=verse");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();

    const nextResponse = NextResponse.json(data);
    nextResponse.headers.set(
      "Cache-Control",
      "no-cache, no-store, must-revalidate"
    );
    return nextResponse;
  } catch (error) {
    console.error("Server Error fetching quote:", error);
  }
}

Answered by Ray

by default, the GET endpoint is static

// pages/api/randomVerse.js
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function GET() {
  try {
    const response = await fetch("https://bible-api.com/?random=verse");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();

    const nextResponse = NextResponse.json(data);
    nextResponse.headers.set(
      "Cache-Control",
      "no-cache, no-store, must-revalidate"
    );
    return nextResponse;
  } catch (error) {
    console.error("Server Error fetching quote:", error);
  }
}

View full answer

7 Replies

@Bombay-duck everything works in postman, there is probably a cache problem somewhere client: `// TestAPI component import axios from 'axios'; import React, { useEffect, useState } from 'react'; const TestAPI = () => { const [quote, setQuote] = useState({ text: "Loading...", reference: "" }); useEffect(() => { const getQuote = async () => { try { const response = await axios.get( `/api/randomverse?timestamp=${new Date().getTime()}` ); const data = response.data; setQuote({ text: data.text, reference: data.reference }); } catch (error) { console.error("Error fetching quote:", error); setQuote({ text: "Failed to load quote", reference: "" }); } }; getQuote(); }, []); return ( <div className="flex flex-col items-center justify-center lg:w-[30rem] w-[20rem]"> <h1 className="font-bold text-2xl mt-8 mb-4 text-center font-barlow"> {quote.text} </h1> <p className="italic">{quote.reference}</p> </div> ); }; export default TestAPI; ` server: `// pages/api/randomVerse.js import { NextResponse } from "next/server"; export async function GET(req,res) { try { const response = await fetch("https://bible-api.com/?random=verse"); if (!response.ok) { throw new Error("Network response was not ok"); } const data = await response.json(); const nextResponse = NextResponse.json(data); nextResponse.headers.set( "Cache-Control", "no-cache, no-store, must-revalidate" ); return nextResponse; } catch (error) { console.error("Server Error fetching quote:", error); } } `

Ray

2024-01-14T11:46:12.000Z

by default, the GET endpoint is static

// pages/api/randomVerse.js
import { NextResponse } from "next/server";

export const dynamic = "force-dynamic";

export async function GET() {
  try {
    const response = await fetch("https://bible-api.com/?random=verse");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();

    const nextResponse = NextResponse.json(data);
    nextResponse.headers.set(
      "Cache-Control",
      "no-cache, no-store, must-revalidate"
    );
    return nextResponse;
  } catch (error) {
    console.error("Server Error fetching quote:", error);
  }
}