Как выполнить выборку данных на стороне клиента в Next. js - PullRequest
Новая
       9

Как выполнить выборку данных на стороне клиента в Next. js

1 голос
/ 20 февраля 2020

Спасибо, что посетили мой вопрос. В последнее время я работаю над продуктом поисковой системы и мне нужно знать код страны клиента. Я попытался получить его по указанному ниже URL-адресу, и он возвращает код страны на стороне сервера.

https://extreme-ip-lookup.com/json/

Пожалуйста, дайте мне знать, как я могу получить правильную страну пользователя код, когда getInitialProps.

1 Ответ

2 голосов
/ 20 февраля 2020

Вы можете сделать это так: 

import React from 'react';
import fetch from 'isomorphic-unfetch';
// ZEIT has created a data-fetching library called SWR (client side).
import useSWR from 'swr';

const API_URL = 'https://extreme-ip-lookup.com/json/';

async function fetcher(url) {
  const res = await fetch(url);
  const json = await res.json();
  return json;
}

function Index() {
  const { data, error } = useSWR(API_URL, fetcher);

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  const { countryCode } = data;

  return (
    <div>
      <p>Country Code: {countryCode}</p>
    </div>
  );
}

export default Index;
...