Giter VIP home page Giter VIP logo

graphql-ruby-hands-on's Introduction

DevContainer for Ruby 3.3, Rails 7.1, graphql-ruby, and Sidekiq

devcontainer for Ruby3.3, Ruby on Rails 7.1

VSCode DevContainer

Install remote container

https://code.visualstudio.com/docs/remote/containers#_installation

Run DevContainer

  1. Open VSCode, then run Reopen in Container

Operation

Run Rails server

Run below command in terminal on the DevContainer

$ bin/rails db:seed
$ bin/rails s

GraphQL Playground

Access to http://0.0.0.0:3000/graphiql

Screenshot 2024-05-17 at 17 13 00

Type Checking

$ bundle exec rbs collection install

# rbs_rails
$ bin/rake rbs_rails:all

# Steep check
$ bundle exec steep check

Solargraph

# Generate documentation for bundled gems
$ bundle exec solargraph bundle

# Download Ruby core documentation
$ bundle exec solargraph download-core

Debugging

Run Run Debug (Shortcut key: F5)

VSCode Debugging

debugging

VSCode extensions

Architecture

Work on Docker Compose

References

graphql-ruby-hands-on's People

Contributors

samuraikun avatar

Watchers

 avatar

graphql-ruby-hands-on's Issues

Dataloaderを利用してN+1を回避するクエリを実装する

Description

info

Ruby(Rails)でのdatalaoderによるリクエスト処理をする場合の選択肢

graphql-batch

  • ShopifyがOSSで開発しているGem
    • dataloader自体が非同期処理前提のためRubyでの非同期処理を実現させるため内部でpromise.rbを利用している
    • promise.rb自体はほぼメンテされていないのであまり筋がよいとは言えなさそう。。
  • 採用事例は豊富

graphql-rubyに同梱されている GraphQL::Dataloader

batch-loader

Develop Frontend by vite_ruby

Why develop Frontend?

Currently, this app just only provides GraphQL API.
Frontend needs in order to become a more practical app.

What kind of UI?

Dashboard Overview:

A main dashboard that provides an overview of the app's functionalities and key metrics.
Real-time data display, possibly in the form of graphs and charts, to provide immediate insights to the user.

Navigation Menu:

A side or top navigation menu to allow users to easily switch between different sections of the app.
Sections could include Dashboard, Reports, Settings, and Help.

Interactive Forms:

Forms for data input that integrate seamlessly with the GraphQL API.
Validation and feedback to ensure users input correct and complete data.

Responsive Design:

Ensure the UI is responsive and works well on various devices, including desktops, tablets, and smartphones.
Use modern design principles to create a clean and engaging interface.

Notifications and Alerts:

Provide notifications and alerts to keep users informed about important updates or issues.
Integrate with real-time functionalities to deliver timely information.

User Management:

Interfaces for user registration, login, and profile management.
Permissions and roles management for different user levels.

Why vite_ruby?

https://github.com/ElMassimo/vite_ruby

It's easy to integrate frontend frameworks such as React and Vue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.