CODEWITHSUNDEEP
reactjsnext.jsswr
Anders Kitson
Anders Kitson

Reputation: 1545

Is it possible to send the pages id in nextJS ussing useSWR so I can fetch data based on the ID of the page I am on

I am doing a request with useSWR in next js and the api route needs the id of the page I am on, it is in the query params at router.query.id But how do i pass that to useSWR so I can pull in the right data from my api router function that talks to my DB.

Here is the simple request

  const router = useRouter();
//PASS ROUTER.QUERY.ID to api/dataSingle
  const { data: valuesData, error: valuesError } = useSWR(
    `/api/dataSingle/`,
    fetcher,
    
  );

UPDATE: If I try to pass the array as per documentation the requerst body in the api function is undefined. Here is what I have tried since reading it.

const fetcher = (url) => fetch(url).then((r) => r.json());
const router = useRouter();
  const { data: valuesData, error: valuesError } = useSWR(
    [`/api/dataSingle/`, router.query.id],
    fetcher
  );

api Route

import { query as q } from "faunadb";
import { serverClient } from "../../utils/fauna-auth";

export default async (req, res) => {
  console.log(req.body);
  returns undefined
};

UPDATE: I have tried the following fetcher, but still don;t grasp what it is even doing so it's not working.

const fetcher = (url, id) => fetch(url, id).then((r) => r.json());

Upvotes: 0

Views: 4863

Answers (2)

Jacob Smit
Jacob Smit

Reputation: 2379

The first parameter in useSWR has two functions:

  1. It is converted into a key for the cache that stores the data received.
  2. It is passed to the fetcher function to allow for retrieval of data.
const fetchWithId = (url, id) => fetch(`${url}?id=${id}`).then((r) => r.json());

const Example = ({ id }) => {
    const { data, error } = useSWR([`/api/dataSingle/`, id], fetchWithId);

    return (
        <pre>
            {data && JSON.stringify(data, null, '\t')}
        </pre>
    )
}

When using an array for the first parameter of useSWR the cache key will be associated with each entry in the array. This means ['/api/dataSingle/', 1] receives a different cache key to ['/api/dataSingle/', 2].

The allows you to pass data other than route or query string parameters that are required by your fetch code.

NOTE DIRECTLY FROM DOCUMENTATION: SWR shallowly compares the arguments on every render, and triggers revalidation if any of them has changed.

Upvotes: 9

enoch
enoch

Reputation: 3123

As i understand it, you want to fetch data on your api route based on the page id. so if so i am assuming your api route contains query params.

const router = useRouter();
//PASS ROUTER.QUERY.ID to api/dataSingle
const { data: valuesData, error: valuesError } = useSWR(
  `/api/dataSingle?id=${router.query.id}`,
  fetcher,

);

in the api route, you'll get the query with req.query

import { query as q } from "faunadb";
import { serverClient } from "../../utils/fauna-auth";

export default async (req, res) => {
  console.log(req.query);
  returns undefined
};

Upvotes: 0

Related Questions