В этом руководстве мы разработаем простой прайс-лист монет, используя 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.