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

Question

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());

This is explained in their documentation: https://swr.vercel.app/docs/arguments. You change the key (your url) to be an array and then you update your fetcher to understand both values. — Jacob Smit, Mar 04 '21 at 00:11
Ok I have tried what I think I read, but still stuck, Any ideas, I updated my code above — Anders Kitson, Mar 04 '21 at 00:37
Your fetcher needs to use the value `const fetcher = (url, id) => { /* use url and id to fetch data and return response /* }` — Jacob Smit, Mar 04 '21 at 00:54
I dont quite understand what goes in the fetcher, when you say `use url and id to fetch data` I have updated my fetcher above, but I know I am misunderstanding things. — Anders Kitson, Mar 04 '21 at 15:53

score 9 · Accepted Answer · edited Aug 12 '21 at 21:48

The first parameter in useSWR has two functions:

It is converted into a key for the cache that stores the data received.
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.

score 0 · Answer 2 · answered Mar 04 '21 at 19:06

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
};

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

2 Answers2