外部からJSONデータを取得して、ブラウザ上に表示したいです。
Reactでfetchしたところ、CORSエラーで取得できませんでした。
そこで、Next.jsをつかって、
apiフォルダ経由でfetchをしてみました。
すると、コンソールログで、データを取得できていることは確認できたのですが、
取得したデータをmap関数で出力しようとすると、
データが取得されるまえに、出力しようとしてTypeエラーになってしまいました。
つぎに、useQueryが良さそうだとわかったので、
Next.jsを使って、apiフォルダ経由で使用してみようと考えたのですが、
create-react-appした環境での説明しか見当たらないので、
途方に暮れております。
どなたかuseQueryをNext.jsで利用した経験のあるかたはいらっしゃいませんか？
どうぞよろしくお願いいたします。
apiのソースコードを掲載できますか？
@ike81818
Questioner
下記のようなコードでデータ取得できました。
import { useQuery } from 'react-query';
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
export default function Home() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
const fetchUsers = async () => {
const res = await fetch('/api/users');
return res.json();
};
function Example() {
const { data, isLoading, isError, error } = useQuery('users', fetchUsers, {
refetchOnWindowFocus: false,
});
if (isLoading) return <span>Loading...</span>
if (isError) return <span>Error:{error.message}</span>
return (
<>
<div>
{data.users.items &&
data.users.items.map((item, index) => {
return (
<>
<div>タイトル: <a href={item.link} target='_new'>{item.title}</a></div>
</>
)
})
}
</div>
</>
)
}
export default async function handler(req, res) {
const response = await fetch("http://webservice.xxxxx.ne.jp/search?keyword=あいうえお")
const users = await response.json()
res.status(200).json({ users })
}