В этом руководстве мы разработаем простой прайс-лист монет, используя GraphQL API Upstash. Вы можете назвать приложение backendless, потому что мы будем обращаться к базе данных напрямую из клиента (JavaScript). См. код.

Мотивация

Мы хотим предоставить пример использования, в котором вы можете использовать GraphQL API без какого-либо внутреннего кода. Сценарий использования — общедоступные данные только для чтения для веб-приложений, где требуется низкая задержка. Данные часто обновляются другим серверным приложением, и вы хотите, чтобы ваши пользователи видели последние обновленные данные. Примеры: списки лидеров, список новостей, список блогов, список продуктов, первые N элементов на главных страницах.

1. Настройка проекта

Создайте следующее приложение: npx create-next-app.

Установите клиент Apollo GraphQL: npm i @apollo/client

2. Настройка базы данных

Если у вас ее нет, создайте базу данных, следуя этому руководству. Подключите свою базу данных через Redis CLI и запустите:

rpush coins '{ "name" : "Bitcoin", "price": 56819, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"}' '{ "name" : "Ethereum", "price": 2130, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png"}' '{ "name" : "Cardano", "price": 1.2, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png"}' '{ "name" : "Polkadot", "price": 35.96, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png"}' '{ "name" : "Stellar", "price": 0.506, "image": "https://s2.coinmarketcap.com/static/img/coins/64x64/512.png"}'

3. Код

В консоли Upstash скопируйте ключ доступа только для чтения на странице конфигурации API (GraphQL Explorer › Configure API). В _app.js создайте клиент Apollo и замените свой ключ доступа, как показано ниже:

Примечание. Необходимо использовать ключ доступа только для чтения, так как ключ будет общедоступен.

Отредактируйте index.js, как показано ниже:

4. Беги

Запустите приложение локально: npm run dev

5. В прямом эфире

Перейдите по адресу http://localhost:3000/ 🎉

И это все! Вы можете идти!

Первоначально опубликовано на https://docs.upstash.com.