Next.js Discord

Discord Forum

How to refetch a page?

Unanswered
Californian posted this in #help-forum
Open in Discord
CalifornianOP
Suppose I have a page which renders a list of items received form a fetch call within a server component.

The page has a search box and some filters.

Given that the user typed inside the searchbox and pressed enter, how do I refetch and get the filtered data?
What is the convention here?

3 Replies

New Guinea Singing Dog
If you're using a search box, it'll have to be a client component because it has user interactivity
And you won't be able to update the server component data unless you refresh the whole page
"use client"

import {useState} from 'react';

export default function Search({ intialData }) {
    let [data, setData] = useState(intialData);
    let [query, setQuery] = useState("");
    async function updateData() {
        const res = await fetch('/api/queryDB', {method:           "POST", body: JSON.stringify({query})})
        //Make POST request to server with search query
        setData(await res.json())
    }
    return (
        <div>
            <form onSubmit={updateData}>
                <input onChange={(e) => setQuery(e.target.value)}>Search here</input>
            </form>
            {data?.map((d) => {
                return (
                    <div>{d}</div>
                )
            })}
        </div>
    )
}

ofc you could also include like an options and setOptions state for ticking boxes etc which you can query in your backend (idk how you have your database set up)