fetching data form strapi with bearer token

[garudaputro]

hi there im using strapi for cms and next js for frontend, and using swr and axios for data fething
im trying to fetch data from strapi backend using bearer token , and here is my code

const address = `${process.env.NEXT_PUBLIC_API_URL}/products` 
const auth = `${process.env.NEXT_PUBLIC_API_TOKEN}`

const fetcher = async (url) => await axios.get(url).then((res)=> res.data)
const {data, error} = useSWR(address, auth, fetcher)

console.log(data) 

and when i console.log(data) it's always shown undefined , it's something wrong with my code ? it's any correct way to fetch data with bearer token?

[pociej]

@garudaputro but why you pass auth (string) as second argument to useSWR while usage is like this useSWR(key, fetcher, options) I have never use strapi but probably the auth token should be passed as header so.

const address = `${process.env.NEXT_PUBLIC_API_URL}/products` 
const auth = `${process.env.NEXT_PUBLIC_API_TOKEN}`

async function fetcher(address) {
  await axios
    .get(url, {
      headers: {
        Authorization: `Bearer ${auth}`,
      },
    })
    .then((res) => res.data);
}

const {data, error} = useSWR(address, fetcher)

[garudaputro]

with your code it make url not defind so i insert the url param like this

const address = `${process.env.NEXT_PUBLIC_API_URL}/products?populate=*`;
 const auth = `${process.env.NEXT_PUBLIC_API_TOKEN}`;

 async function fetcher(url) {
   await axios
     .get(url, {
       headers: {
         Authorization: `Bearer ${auth}`,
       },
     })
     .then((res) => res.data);
 }

 const { data, error } = useSWR(address, fetcher);
 console.log(data);

and still get result undefined on console.log(data) , it's any wrong with this code @pociej ?

[pociej]

yeah there was a typo. Data are loaded async so don't expect it to be there just after hook call. Show me whole component, and how you render data. Is there anything in error? how about isLoading

[garudaputro]

this is whole code in my component

import useSWR from "swr";
import axios from "axios";
import CardProduct from "@/pages/components/cardProduct";

const FavoriteProductSection = () => {

  const address = `${process.env.NEXT_PUBLIC_API_URL}/products?populate=*`;
  const auth = `${process.env.NEXT_PUBLIC_API_TOKEN}`;

  async function fetcher(url) {
    await axios
      .get(url, {
        headers: {
          Authorization: `Bearer ${auth}`,
        },
      })
      .then((res) => res.data);
  }

  const { data, error } = useSWR(address, fetcher);
  let loading = !data && !error;
  console.log(data);

  return (
    <div className="mx-auto max-w-2xl py-12 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
      {error && error.message}
      {loading && "loading"}
      <h2 className="text-2xl text-center font-nunito font-semibold tracking-tight  text-gray-700">
      Favorite Themes
      </h2>

      <div className="mt-6 overflow-x-scroll h-[300px] lg:overflow-x-auto lg:grid lg:grid-cols-4 flex   gap-6 ">
        {data?.map((item) => (
          <CardProduct item={item} key={item.id} />
        ))}
      </div>
    </div>
  );
};

export default FavoriteProductSection;

in error when i console.log show undefined

[garudaputro]

hi @pociej i've find the solution, here the code

const address = `${process.env.NEXT_PUBLIC_API_URL}/products?populate=*`;
  const auth = `${process.env.NEXT_PUBLIC_API_TOKEN}`;
  async function fetcher(url) {
    const response = await axios.get(url, {
      headers: {
        Authorization: `Bearer ${auth}`,
      },
    });
    return response.data.data;
  }
  const { data, error } = useSWR(address, fetcher);
  let loading = !data && !error;
  console.log(data);

thanks anyway for your time to answering :)