Рубрики
Без рубрики

Приложение Crud с next.js и faunadb

FAUNADB – это глобальная база данных без серверов, созданная бывшими инженерами Twitter Evan Weaver и Matt Free … Tagged with NextJS, Fauna, React, JavaScript.

FAUNADB является глобальной базой данных без серверов, созданной бывшими инженерами Twitter Evan Weaver и Matt Freels.

Следующее написано на Страница компании фауны :

Фауна-это уровень данных для этого нового поколения клиентских безревенных приложений.

FAUNADB предоставляет интерфейс веб-нему, поддерживая GraphQL и пользовательскую бизнес-логику, которая легко интегрируется с остальной бесвередной экосистемой. Основная глобально распределенная хранение и вычислительная платформа является быстрой, последовательной и надежной, с современной инфраструктурой безопасности. С фауной нет компромисса.

Это увлекательно! Когда я прочитал это, я хотел использовать его немедленно.

В этом уроке мы построим простое приложение с Next.js и попробуйте создать, получать, обновлять и удалять (CRUD) документы в FAUNADB.

Что мы будем:

  • Зарегистрируйтесь на учетной записи FAUNADB
  • Создайте базу данных в Консоль FAUNADB
  • Создайте приложение Next.js
  • Получить документы
  • Получить документ
  • Создайте документ
  • Обновите документ
  • Удалить документ

Обратите внимание, что эта статья, вероятно, будет длинной, поэтому я буду опустить подробные объяснения. По той же причине я также буду опустить все стили в исходном коде, но они включены GitHub Анкет

Зарегистрируйтесь на учетной записи FAUNADB

Перейти к Страница регистрации фауны и создать учетную запись Faunadb. Если у вас уже есть учетная запись FAUNADB, войдите в систему и перейдите в следующий раздел.

Создайте базу данных

Давайте создадим новую базу данных. Нажмите кнопку «Новая база данных» в консоли FAUNADB.

В этом уроке мы будем использовать демонстрационные данные, поэтому проверьте «предварительно заполнять демо-данными».

Нажмите кнопку «Сохранить», чтобы создать базу данных.

Как видите, демо -данных заполняются в базе данных. В каждой коллекции есть несколько документов, поэтому мы будем использовать их.

Создать ключ сервера

Нам нужно создать ключ сервера для доступа к Следующая Фауна-Круд база данных.

Перейдите в «Безопасность» в левом меню и нажмите кнопку «Новая клавиша».

Выберите «Сервер» для роли и нажмите кнопку «Сохранить».

После создания ключа вы должны увидеть свой Секрет ключа Анкет Секрет не будет отображаться снова, поэтому сохраните эту страницу открытой или скопируйте ее где -нибудь.

Создайте приложение Next.js

Давайте создадим приложение Next.js и сделаем некоторые подготовки к CRUD.

Создайте новое приложение Next.js, используя Create-next-App , который называется «следующая фаунаруд» в этом уроке:

yarn create next-app next-fauna-crud

Начните Dev сервер и посмотрите результат в вашем браузере:

cd next-fauna-crud
yarn dev

Установить зависимости

Заранее установите зависимости, используемые в этом уроке:

yarn add faunadb swr react-hook-form
  • FAUNADB : Драйвер JavaScript, необходимый для взаимодействия с FAUNADB.
  • SWR : Библиотека React Hooks для извлечения данных.
  • Реакция-крючка формы : Библиотека проверки формы для легко создания форм с меньшим количеством кода.

Настройка переменных среды

Создайте новый файл с названием .env.local В корне вашего проекта и установите следующую переменную:

FAUNA_SERVER_KEY=

Установите секрет ключа вашего сервера, созданный в консоли FAUNADB.

Создать создание клиента

Создайте экземпляр клиента, который использует только что настройку сервера, который мы только что настроили.

  • Создайте каталог верхнего уровня под названием utils Анкет
  • Внутри, создайте файл: Fauna-Auth.js Анкет
// utils/fauna-auth.js

import faunadb from 'faunadb';

export const serverClient = new faunadb.Client({
  secret: process.env.FAUNA_SERVER_KEY,
});

Получить документы

Теперь давайте попробуем Круд!

Во -первых, мы попробуем извлечь данные, получить все документы в коллекции «клиентов» и перечислить их в таблице.

Создать маршрут API

  • Создайте каталог под названием Клиенты в Страницы/API Анкет
  • Создайте файл с именем index.js в Страницы/API/клиенты Анкет
// pages/api/customers/index.js

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

export default async (req, res) => {
  try {
    const customers = await serverClient.query(
      q.Map(
        // iterate each item in result
        q.Paginate(
          // make paginatable
          q.Match(
            // query index
            q.Index('all_customers') // specify source
          )
        ),
        (ref) => q.Get(ref) // lookup each result by its reference
      )
    );
    // ok
    res.status(200).json(customers.data);
  } catch (e) {
    // something went wrong
    res.status(500).json({ error: e.message });
  }
};

FAUNADB предлагает свой собственный язык запросов под названием Fql (Язык запросов фауны). Это предоставляет много Встроенные функции Это может быть использовано для запроса или мутированных баз данных FAUNADB. Карта , Страница , Матч , Индекс и Получить Функции являются одними из них. Для получения дополнительной информации о каждой встроенной функции, ознакомьтесь с FQL Chief -Spet Страница в Фауна документация Анкет

all_customers Индекс был создан автоматически при создании базы данных, поэтому вы можете найти ее в своей консоли FAUNADB.

Создать страницу списка

Мы будем использовать нашу домашнюю страницу, чтобы перечислить документы. Open Страницы/index.js и перезаписать это следующим образом:

// pages/index.js

import useSWR from 'swr';
import Layout from '../components/layout';
import DataRow from '../components/data-row';

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

const Home = () => {
  const { data, error } = useSWR('/api/customers', fetcher);

  if (error) return 
failed to load
;

  return (
    
      
Next Fauna CRUD


      

        
Customer Data

        

          
name

          
telephone

          
credit card

        

        {data ? (
          data.map((d) => (
            
          ))
        ) : (
          <>
            
            
            
          
        )}
      

    
  );
};

export default Home;

Основное использование SWR как указано выше. С ним логика извлечения данных настолько упрощена. Удивительно! Узнайте больше о SWR Анкет

Создать компонент таблицы

  • Создайте каталог верхнего уровня под названием Компоненты Анкет
  • Внутри, создайте файл: data-drow.js .
// components/data-row.js

import Link from 'next/link';

const DataRow = ({
  id,
  firstName,
  lastName,
  telephone,
  creditCard,
  loading,
}) => (
  

    

      
        
          {firstName} {lastName}
        
      
    

    
{telephone}

    
{creditCard}

  

);

export default DataRow;

Создать компонент макета

Создайте компонент макета, который будет распространен на всех страницах:

  • Создайте файл с именем Mayout.js в Компоненты каталог.
// components/layout.js

import Head from 'next/head';

const Layout = ({ children }) => (
  <>
    
      Next Fauna CRUD
      
    

    

      
{children}

    

  
);

export default Layout;

Теперь мы должны быть в состоянии получить и отображать все данные клиента. Перезагрузить Dev Сервер для загрузки переменных среды, а затем получить доступ http://localhost: 3000/ :

Хорошо, мы успешно взяли все данные клиентов.

Получить документ

Далее мы попробуем получить конкретный документ клиента.

Создать маршрут API

  • Создайте каталог под названием [id] в Страницы/API/клиенты Анкет
  • Создайте файл с именем index.js в Страницы/API/клиенты/[id] Анкет

Создать динамические маршруты В приложениях Next.js используйте имя каталога (или имя файла) с скобками, как указано выше. Если вы новичок в next.js, ознакомьтесь с документацией Здесь Анкет

// pages/api/customers/[id]/index.js

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

export default async (req, res) => {
  const {
    query: { id },
  } = req;

  try {
    const customer = await serverClient.query(
      q.Get(q.Ref(q.Collection('customers'), id))
    );
    res.status(200).json(customer.data);
  } catch (e) {
    res.status(500).json({ error: e.message });
  }
};

Чтобы получить конкретный документ, вам нужен его Стоимость (ID), но вы можете получить его, как указано выше.

Создайте детальную страницу

  • Создайте каталог под названием Клиенты в страницы каталог.
  • Создайте каталог под названием [id] в Страницы/клиенты Анкет
  • Создайте файл с именем index.js в Страницы/клиенты/[id] Анкет
// pages/customers/[id]/index.js

import { useRouter } from 'next/router';
import useSWR from 'swr';
import Layout from '../../../components/layout';

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

const Customer = () => {
  const router = useRouter();
  const { id } = router.query;

  const { data, error } = useSWR(`/api/customers/${id}`, fetcher);

  if (error) return 
failed to load
;

  return (
    
      
Customer

      

      {data ? (
        

          

            {data.firstName} {data.lastName}
          

          
{data.telephone}

          
{data.creditCard.number}

        

      ) : (
        
loading...

      )}
    
  );
};

export default Customer;

Получение Запрос объект тоже легко. Просто используйте userouter крюк предоставлен next.js.

Давайте посмотрим на страницу деталей. Перейдите на домашнюю страницу и нажмите на любого клиента:

Ладно, заработка документов прошло хорошо.

Создайте документ

В -третьих, мы попробуем создать новый документ.

Создать маршрут API

Создайте файл с именем create.js в Страницы/API/клиенты :

// pages/api/customers/create.js

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

export default async (req, res) => {
  const { firstName, lastName, telephone, creditCardNumber } = req.body;

  try {
    await serverClient.query(
      q.Create(q.Collection('customers'), {
        data: {
          firstName,
          lastName,
          telephone,
          creditCard: {
            number: creditCardNumber,
          },
        },
      })
    );
    res.status(200).end();
  } catch (e) {
    res.status(500).json({ error: e.message });
  }
};

Мы снова будем использовать коллекцию “клиентов”. Просто укажите данные сбора и документа в Создать функция Это очень просто.

Создайте страницу Create

Создайте страницу с формой для добавления новых клиентов:

  • Создайте файл с именем create.js в Страницы/клиенты Анкет
// pages/customers/create.js

import { useState } from 'react';
import Router from 'next/router';
import { useForm } from 'react-hook-form';
import Layout from '../../components/layout';

const Create = () => {
  const [errorMessage, setErrorMessage] = useState('');

  const {
    handleSubmit,
    register,
    formState: { errors },
  } = useForm();

  const onSubmit = handleSubmit(async (formData) => {
    if (errorMessage) setErrorMessage('');

    try {
      const res = await fetch('/api/customers/create', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      if (res.status === 200) {
        Router.push('/');
      } else {
        throw new Error(await res.text());
      }
    } catch (error) {
      console.error(error);
      setErrorMessage(error.message);
    }
  });

  return (
    
      
Create Customer


      

        

          
          
          {errors.firstName && (
            
              {errors.firstName.message}
            
          )}
        


        

          
          
          {errors.lastName && (
            
              {errors.lastName.message}
            
          )}
        


        

          
          
          {errors.telephone && (
            
              {errors.telephone.message}
            
          )}
        


        

          
          
          {errors.creditCardNumber && (
            
              {errors.creditCardNumber.message}
            
          )}
        


        

          
        

      


      {errorMessage && (
        

          {errorMessage}
        

      )}
    
  );
};

export default Create;

Извините за длинный код. Это потому, что он включает в себя обработку ошибок. Приведенная выше форма построена с React Hook Form , поэтому он должен иметь меньше кода, чем обычно. Узнайте больше о форме React Hook Анкет

Если документ создан успешно, вы будете перенаправлены на домашнюю страницу.

Добавить ссылку Create

Open Страницы/index.js и добавьте ссылку на страницу Create:

// pages/index.js

import Link from 'next/link'; // add
...

const Home = () => {
  ...

  return (
    
      
Next Fauna CRUD

      {/* add */}
      
        Create New Customer
      

      ...
    
  );
};

export default Home;

Теперь мы готовы создать документ. Перейдите на домашнюю страницу и нажмите на ссылку, которую мы только что добавили.

Выглядит хорошо. Попробуйте нажать кнопку «Создать», не вводя ничего.

Обработка ошибок работает хорошо.

Затем введите значения, чтобы создать клиента.

Это сработало! Новый документ был создан в коллекции «клиентов».

Обновите документ

Затем мы попробуем обновить документ.

Создать маршрут API

Создайте файл с именем Update.js в Страницы/API/клиенты/[id] :

// pages/api/customers/[id]/update.js

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

export default async (req, res) => {
  const {
    query: { id },
  } = req;

  const { firstName, lastName, telephone, creditCardNumber } = req.body;

  try {
    await serverClient.query(
      q.Update(q.Ref(q.Collection('customers'), id), {
        data: {
          firstName,
          lastName,
          telephone,
          creditCard: {
            number: creditCardNumber,
          },
        },
      })
    );
    res.status(200).end();
  } catch (e) {
    res.status(500).json({ error: e.message });
  }
};

Это похоже на комбинацию маршрута API для создания документа и маршрута API для получения документа. Единственное новое, что Обновление Функция используется.

Создать страницу обновления

Создайте файл с именем Update.js в Страницы/клиенты/[id] :

// pages/customers/[id]/update.js

import { useRouter } from 'next/router';
import useSWR from 'swr';
import Layout from '../../../components/layout';
import EditForm from '../../../components/edit-form';

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

const Update = () => {
  const router = useRouter();
  const { id } = router.query;

  const { data, error } = useSWR(`/api/customers/${id}`, fetcher);

  if (error) return 
failed to load
;

  return (
    
      {data ?  : 
loading...
}
    
  );
};

export default Update;

Страница обновления должна получить данные в качестве значений по умолчанию, поэтому создайте форму отдельно. Пройти значения по умолчанию и id Отправление к Editform компонент, который мы создадим дальше.

Создать компонент формы

Создайте файл с именем РЕДАКТИРОВАТЬ ФОРМ.JS в Компоненты каталог:

// components/edit-form.js

import { useState } from 'react';
import Router from 'next/router';
import { useForm } from 'react-hook-form';

const EditForm = ({ defaultValues, id }) => {
  const [errorMessage, setErrorMessage] = useState('');

  const { handleSubmit, register, formState: { errors } } = useForm({
    defaultValues: {
      ...defaultValues,
      creditCardNumber: defaultValues.creditCard.number,
    },
  });

  const onSubmit = handleSubmit(async (formData) => {
    if (errorMessage) setErrorMessage('');

    try {
      const res = await fetch(`/api/customers/${id}/update`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });
      if (res.status === 200) {
        Router.push('/');
      } else {
        throw new Error(await res.text());
      }
    } catch (error) {
      console.error(error);
      setErrorMessage(error.message);
    }
  });

  return (
    // almost the same as the creation form
  );
};

export default EditForm;

Я пропустил часть JSX, потому что она почти такая же, как и на странице Create. Вы можете найти его на GitHub Анкет

Добавить ссылку на редактирование

Open Страницы/клиенты/[id]/index.js и добавить ссылку на страницу обновления:

// pages/customers/[id]/index.js

...
import Link from 'next/link'; // add
...

const Customer = () => {
  ...

  return (
    
      ...
      {data ? (
        

          ...

          {/* add */}
          
        

      ) : (
        ...
      )}
    
  );
};

export default Customer;

Теперь перейдите на страницу деталей любого клиента и нажмите на ссылку «Редактировать», которую мы только что добавили.

Хорошо, текущие данные отображаются в каждом поле ввода.

Давайте отредактируем любое значение и обновим данные. Я смену название этого клиента на «Таро Ямада».

Имя клиента обновилось. Идеальный!

Удалить документ

Наконец, мы попробуем удалить документ.

Создать маршрут API

Создайте файл с именем delete.js в Страницы/API/клиенты/[id] :

// pages/api/customers/[id]/delete.js

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

export default async (req, res) => {
  const {
    query: { id },
  } = req;

  try {
    await serverClient.query(q.Delete(q.Ref(q.Collection('customers'), id)));
    res.status(200).end();
  } catch (e) {
    res.status(500).json({ error: e.message });
  }
};

Документ может быть удален с помощью Удалить функция

Добавить кнопку удаления

Open Страницы/клиенты/[id]/index.js и добавить кнопку, чтобы удалить документ:

// pages/customers/[id]/index.js

...

const Customer = () => {
  ...

  // add
  const onClick = async () => {
    try {
      const res = await fetch(`/api/customers/${id}/delete`, {
        method: 'DELETE',
      });
      if (res.status === 200) {
        router.push('/');
      } else {
        throw new Error(await res.text());
      }
    } catch (error) {
      console.error(error);
    }
  };

  ...

  return (
    
      ...
      {data ? (
        

          ...

          

            ...
            {/* add */}
            
          

        

      ) : (
        ...
      )}
    
  );
};

export default Customer;

Вот и все. Код для операции удаления очень прост. Если документ успешно удален, вы будете перенаправлены на домашнюю страницу.

Теперь перейдите на страницу деталей любого клиента и попробуйте удалить документ.

Да! Все операции CRUD завершены.

Вывод

В этом уроке я продемонстрировал, как выполнять операции CRUD в FAUNADB, используя язык запросов фауны (FQL). В следующий раз я напишу о том, как использовать Graphql вместо FQL. В настоящее время в FAUNADB есть несколько примеров операций CRUD с использованием приложений, поэтому я надеюсь, что эта статья полезна.

Вы можете найти код для этого урока по GitHub Анкет

Оригинал: “https://dev.to/kjmczk/crud-app-with-next-js-and-faunadb-574d”

Читайте ещё по теме: