From 961c90cd7b1601ff4039c8ea674681d2d8f18dce Mon Sep 17 00:00:00 2001 From: sid palas Date: Mon, 23 Jan 2023 15:06:40 -0500 Subject: [PATCH] Override CORS, query apis from client --- 03-installation-and-setup/README.md | 16 +++ .../sample-app/api-golang/database/db.go | 5 +- .../sample-app/api-golang/go.mod | 1 + .../sample-app/api-golang/go.sum | 14 ++ .../sample-app/api-golang/main.go | 21 ++- .../sample-app/api-node/Makefile | 8 ++ .../sample-app/api-node/package-lock.json | 21 +++ .../sample-app/api-node/package.json | 1 + .../sample-app/api-node/src/db.js | 1 - .../sample-app/api-node/src/index.js | 10 +- .../sample-app/client-react/README.md | 5 + .../sample-app/client-react/index.html | 1 - .../sample-app/client-react/package-lock.json | 135 ++++++++++++++++++ .../sample-app/client-react/package.json | 2 + .../sample-app/client-react/src/App.jsx | 44 ++++-- 15 files changed, 268 insertions(+), 17 deletions(-) create mode 100644 03-installation-and-setup/README.md create mode 100644 04-building-container-images/sample-app/api-node/Makefile create mode 100644 04-building-container-images/sample-app/client-react/README.md diff --git a/03-installation-and-setup/README.md b/03-installation-and-setup/README.md new file mode 100644 index 0000000..1c9dbc4 --- /dev/null +++ b/03-installation-and-setup/README.md @@ -0,0 +1,16 @@ +Docker Desktop: https://docs.docker.com/get-docker/ + +Docker Engine: https://get.docker.com/ + +Hello World: +``` +docker run docker/whalesay cowsay "Hey Team! 👋" +``` + +Run Postgres: +``` +docker run \ + --env POSTGRES_PASSWORD=foobarbaz \ + --publish 5432:5432 \ + postgres:15.1-alpine +``` \ No newline at end of file diff --git a/04-building-container-images/sample-app/api-golang/database/db.go b/04-building-container-images/sample-app/api-golang/database/db.go index aa208f2..a248530 100644 --- a/04-building-container-images/sample-app/api-golang/database/db.go +++ b/04-building-container-images/sample-app/api-golang/database/db.go @@ -22,7 +22,7 @@ func InitDB(connString string) error { return nil } -func GetTime(ctx *gin.Context) { +func GetTime(ctx *gin.Context) time.Time { var tm time.Time err := conn.QueryRow(ctx, "SELECT NOW() as now;").Scan(&tm) @@ -30,6 +30,5 @@ func GetTime(ctx *gin.Context) { fmt.Fprintf(os.Stderr, "QueryRow failed: %v\n", err) os.Exit(1) } - - fmt.Println(tm) + return tm } diff --git a/04-building-container-images/sample-app/api-golang/go.mod b/04-building-container-images/sample-app/api-golang/go.mod index a41a96c..76b2484 100644 --- a/04-building-container-images/sample-app/api-golang/go.mod +++ b/04-building-container-images/sample-app/api-golang/go.mod @@ -8,6 +8,7 @@ require ( ) require ( + github.com/gin-contrib/cors v1.4.0 // indirect github.com/gin-contrib/sse v0.1.0 // indirect github.com/go-playground/locales v0.14.1 // indirect github.com/go-playground/universal-translator v0.18.0 // indirect diff --git a/04-building-container-images/sample-app/api-golang/go.sum b/04-building-container-images/sample-app/api-golang/go.sum index 4f5737d..a1f28ce 100644 --- a/04-building-container-images/sample-app/api-golang/go.sum +++ b/04-building-container-images/sample-app/api-golang/go.sum @@ -2,8 +2,11 @@ github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ3 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c= github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= +github.com/gin-contrib/cors v1.4.0 h1:oJ6gwtUl3lqV0WEIwM/LxPF1QZ5qe2lGWdY2+bz7y0g= +github.com/gin-contrib/cors v1.4.0/go.mod h1:bs9pNM0x/UsmHPBWT2xZz9ROh8xYjYkiURUfmBoMlcs= github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE= github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI= +github.com/gin-gonic/gin v1.8.1/go.mod h1:ji8BvRH1azfM+SYow9zQ6SZMvR8qOMZHmsCuWR9tTTk= github.com/gin-gonic/gin v1.8.2 h1:UzKToD9/PoFj/V4rvlKqTRKnQYyz8Sc1MJlv4JHPtvY= github.com/gin-gonic/gin v1.8.2/go.mod h1:qw5AYuDrzRTnhvusDsrov+fDIxp9Dleuu12h8nfB398= github.com/go-playground/assert/v2 v2.0.1 h1:MsBgLAaY856+nPRTKrp3/OZK38U/wa0CcBYNjji3q3A= @@ -13,8 +16,10 @@ github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/o github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY= github.com/go-playground/universal-translator v0.18.0 h1:82dyy6p4OuJq4/CByFNOn/jYrnRPArHwAcmLoJZxyho= github.com/go-playground/universal-translator v0.18.0/go.mod h1:UvRDBj+xPUEGrFYl+lu/H90nyDXpg0fqeB/AQUGNTVA= +github.com/go-playground/validator/v10 v10.10.0/go.mod h1:74x4gJWsvQexRdW8Pn3dXSGrTK4nAUsbPlLADvpJkos= github.com/go-playground/validator/v10 v10.11.1 h1:prmOlTVv+YjZjmRmNSF3VmspqJIxJWXmqUsHwfTRRkQ= github.com/go-playground/validator/v10 v10.11.1/go.mod h1:i+3WkQ1FvaUjjxh1kSvIA4dMGDBiPU55YFDl0WbKdWU= +github.com/goccy/go-json v0.9.7/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I= github.com/goccy/go-json v0.10.0 h1:mXKd9Qw4NuzShiRlOXKews24ufknHO7gx30lsDyokKA= github.com/goccy/go-json v0.10.0/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I= github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk= @@ -41,6 +46,7 @@ github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY= github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE= github.com/leodido/go-urn v1.2.1 h1:BqpAaACuzVSgi/VLzGZIobT2z4v53pjosyNd9Yv6n/w= github.com/leodido/go-urn v1.2.1/go.mod h1:zt4jvISO2HfUBqxjfIshjdMTYS56ZS/qv49ictyFfxY= +github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94= github.com/mattn/go-isatty v0.0.17 h1:BTarxUcIeDqL27Mc+vyvdWYSL28zpIhv3RoTdsLMPng= github.com/mattn/go-isatty v0.0.17/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM= github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q= @@ -48,6 +54,7 @@ github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q= github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M= github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk= +github.com/pelletier/go-toml/v2 v2.0.1/go.mod h1:r9LEWfGN8R5k0VXJ+0BkIe7MYkRdwZOjgMj2KwnJFUo= github.com/pelletier/go-toml/v2 v2.0.6 h1:nrzqCb7j9cDFj2coyLNLaZuJTLjWjlaz6nvTvIwycIU= github.com/pelletier/go-toml/v2 v2.0.6/go.mod h1:eumQOmlWiOPt5WriQQqoM5y18pDHwha2N+QD+EUNTek= github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA= @@ -67,13 +74,17 @@ github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/ github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU= github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk= github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4= +github.com/ugorji/go v1.2.7/go.mod h1:nF9osbDWLy6bDVv/Rtoh6QgnvNDpmCalQV5urGCCS6M= +github.com/ugorji/go/codec v1.2.7/go.mod h1:WGN1fab3R1fzQlVQTkfxVtIBhWDRqOviHU95kRgeqEY= github.com/ugorji/go/codec v1.2.8 h1:sgBJS6COt0b/P40VouWKdseidkDgHxYGm0SAglUHfP0= github.com/ugorji/go/codec v1.2.8/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg= go.uber.org/atomic v1.10.0 h1:9qC72Qh0+3MqyJbAn8YU5xVq1frD8bn3JtD2oXtafVQ= go.uber.org/atomic v1.10.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0= +golang.org/x/crypto v0.0.0-20210711020723-a769d52b0f97/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc= golang.org/x/crypto v0.0.0-20211215153901-e495a2d5b3d3/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4= golang.org/x/crypto v0.5.0 h1:U/0M97KRkSFvyD/3FSmdP5W5swImpNgle/EHFhOsQPE= golang.org/x/crypto v0.5.0/go.mod h1:NK/OQwhpMQP3MwtdjgLlYHnH9ebylxKWv3e0fK+mkQU= +golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg= golang.org/x/net v0.0.0-20211112202133-69e39bad7dc2/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y= golang.org/x/net v0.5.0 h1:GyT4nK/YDHSqa1c4753ouYCDajOYKTja9Xb/OHtgvSw= golang.org/x/net v0.5.0/go.mod h1:DivGGAXEgPSlEBzxGzZI+ZLohi+xUj054jfeKui00ws= @@ -82,11 +93,13 @@ golang.org/x/sync v0.0.0-20220923202941-7f9b1623fab7/go.mod h1:RxMgew5VJxzue5/jJ golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs= golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs= golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= +golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.0.0-20210806184541-e5e7981a1069/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/sys v0.4.0 h1:Zr2JFtRQNX3BCZ8YtxRE9hNJYC8J6I1MVbMg6owUp18= golang.org/x/sys v0.4.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg= golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo= +golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ= golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ= golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ= golang.org/x/text v0.6.0 h1:3XmdazWV+ubf7QgHSTWeykHOci5oeekaGJBLkrkaw4k= @@ -95,6 +108,7 @@ golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGm golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IVDexMakfv52eLZ2CXBWiKr4= golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0= google.golang.org/protobuf v1.26.0-rc.1/go.mod h1:jlhhOSvTdKEhbULTjvd4ARK9grFBp09yW+WbY/TyQbw= +google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I= google.golang.org/protobuf v1.28.1 h1:d0NfwRgPtno5B1Wa6L2DAG+KivqkdutMf1UhdNx175w= google.golang.org/protobuf v1.28.1/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I= gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0= diff --git a/04-building-container-images/sample-app/api-golang/main.go b/04-building-container-images/sample-app/api-golang/main.go index e995d26..be9ccfa 100644 --- a/04-building-container-images/sample-app/api-golang/main.go +++ b/04-building-container-images/sample-app/api-golang/main.go @@ -3,7 +3,9 @@ package main import ( "log" "os" + "time" + "github.com/gin-contrib/cors" "github.com/gin-gonic/gin" "api-golang/database" @@ -22,10 +24,25 @@ func init() { func main() { r := gin.Default() + r.Use(cors.New(cors.Config{ + // AllowOrigins: []string{"http://127.0.0.1:5173/"}, + AllowMethods: []string{"GET"}, + AllowHeaders: []string{"Origin"}, + ExposeHeaders: []string{"Content-Length"}, + // AllowCredentials: true, + AllowOriginFunc: func(origin string) bool { + return true + // return origin == "http://127.0.0.1:8080/" + }, + // MaxAge: 12 * time.Hour, + })) + var tm time.Time + r.GET("/", func(c *gin.Context) { - database.GetTime(c) + tm = database.GetTime(c) c.JSON(200, gin.H{ - "message": "pong", + "api": "golang", + "now": tm, }) }) r.Run() // listen and serve on 0.0.0.0:8080 diff --git a/04-building-container-images/sample-app/api-node/Makefile b/04-building-container-images/sample-app/api-node/Makefile new file mode 100644 index 0000000..f43e212 --- /dev/null +++ b/04-building-container-images/sample-app/api-node/Makefile @@ -0,0 +1,8 @@ +.PHONY: run-local +run-local: + PGUSER=postgres \ + PGHOST=localhost \ + PGPASSWORD=foobarbaz \ + PGDATABASE=postgres \ + PGPORT=5432 \ + node ./src/index.js \ No newline at end of file diff --git a/04-building-container-images/sample-app/api-node/package-lock.json b/04-building-container-images/sample-app/api-node/package-lock.json index 6cd38d4..f347718 100644 --- a/04-building-container-images/sample-app/api-node/package-lock.json +++ b/04-building-container-images/sample-app/api-node/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "cors": "^2.8.5", "express": "^4.18.2", "pg": "^8.8.0" } @@ -113,6 +114,18 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -381,6 +394,14 @@ "node": ">= 0.6" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/object-inspect": { "version": "1.12.3", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", diff --git a/04-building-container-images/sample-app/api-node/package.json b/04-building-container-images/sample-app/api-node/package.json index 797ce13..32c9236 100644 --- a/04-building-container-images/sample-app/api-node/package.json +++ b/04-building-container-images/sample-app/api-node/package.json @@ -9,6 +9,7 @@ "author": "", "license": "ISC", "dependencies": { + "cors": "^2.8.5", "express": "^4.18.2", "pg": "^8.8.0" } diff --git a/04-building-container-images/sample-app/api-node/src/db.js b/04-building-container-images/sample-app/api-node/src/db.js index f2a14d2..582169f 100644 --- a/04-building-container-images/sample-app/api-node/src/db.js +++ b/04-building-container-images/sample-app/api-node/src/db.js @@ -14,7 +14,6 @@ const getDateTime = async () => { const client = await pool.connect(); try { const res = await client.query('SELECT NOW() as now;'); - console.log(res.rows[0]); return res.rows[0]; } catch (err) { console.log(err.stack); diff --git a/04-building-container-images/sample-app/api-node/src/index.js b/04-building-container-images/sample-app/api-node/src/index.js index 39d255a..9d7cd39 100644 --- a/04-building-container-images/sample-app/api-node/src/index.js +++ b/04-building-container-images/sample-app/api-node/src/index.js @@ -1,13 +1,21 @@ const { getDateTime } = require('./db'); const express = require('express'); +const cors = require('cors'); const app = express(); +app.use( + cors({ + origin: 'http://127.0.0.1:5173', + }) +); const port = 3000; app.get('/', async (req, res) => { const dateTime = await getDateTime(); - res.send(dateTime); + const response = dateTime; + response.api = 'node'; + res.send(response); }); app.listen(port, () => { diff --git a/04-building-container-images/sample-app/client-react/README.md b/04-building-container-images/sample-app/client-react/README.md new file mode 100644 index 0000000..13ce7a9 --- /dev/null +++ b/04-building-container-images/sample-app/client-react/README.md @@ -0,0 +1,5 @@ +``` +npm create vite@latest +npm i @tanstack/react-query axios +``` + diff --git a/04-building-container-images/sample-app/client-react/index.html b/04-building-container-images/sample-app/client-react/index.html index b9438a8..6b1f7f2 100644 --- a/04-building-container-images/sample-app/client-react/index.html +++ b/04-building-container-images/sample-app/client-react/index.html @@ -2,7 +2,6 @@ - DevOps Directive Docker Course diff --git a/04-building-container-images/sample-app/client-react/package-lock.json b/04-building-container-images/sample-app/client-react/package-lock.json index 04f2930..7cd8a2e 100644 --- a/04-building-container-images/sample-app/client-react/package-lock.json +++ b/04-building-container-images/sample-app/client-react/package-lock.json @@ -8,6 +8,8 @@ "name": "client-react", "version": "0.0.0", "dependencies": { + "@tanstack/react-query": "^4.22.4", + "axios": "^1.2.3", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -556,6 +558,41 @@ "node": ">=10" } }, + "node_modules/@tanstack/query-core": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.22.4.tgz", + "integrity": "sha512-t79CMwlbBnj+yL82tEcmRN93bL4U3pae2ota4t5NN2z3cIeWw74pzdWrKRwOfTvLcd+b30tC+ciDlfYOKFPGUw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.22.4.tgz", + "integrity": "sha512-e5j5Z88XUQGeEPMyz5XF1V0mMf6Da+6URXiTpZfUb9nuHs2nlNoA+EoIvnhccE5b9YT6Yg7kARhn2L7u94M/4A==", + "dependencies": { + "@tanstack/query-core": "4.22.4", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-native": "*" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -600,12 +637,46 @@ "vite": "^4" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.3.tgz", + "integrity": "sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/csstype": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", "dev": true }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/esbuild": { "version": "0.16.17", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz", @@ -643,6 +714,38 @@ "@esbuild/win32-x64": "0.16.17" } }, + "node_modules/follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", @@ -703,6 +806,25 @@ "loose-envify": "cli.js" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -751,6 +873,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -836,6 +963,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/vite": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz", diff --git a/04-building-container-images/sample-app/client-react/package.json b/04-building-container-images/sample-app/client-react/package.json index a755674..19be18f 100644 --- a/04-building-container-images/sample-app/client-react/package.json +++ b/04-building-container-images/sample-app/client-react/package.json @@ -9,6 +9,8 @@ "preview": "vite preview" }, "dependencies": { + "@tanstack/react-query": "^4.22.4", + "axios": "^1.2.3", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/04-building-container-images/sample-app/client-react/src/App.jsx b/04-building-container-images/sample-app/client-react/src/App.jsx index c67dada..cdebffc 100644 --- a/04-building-container-images/sample-app/client-react/src/App.jsx +++ b/04-building-container-images/sample-app/client-react/src/App.jsx @@ -1,20 +1,46 @@ import { useState } from 'react' -import reactLogo from './assets/react.svg' +import { + QueryClient, + QueryClientProvider, + useQuery, +} from "@tanstack/react-query"; +import axios from "axios"; + import './App.css' -function App() { - const [count, setCount] = useState(0) +const queryClient = new QueryClient(); + +function Example(props) { + const { isLoading, error, data, isFetching } = useQuery({ + queryKey: [props.api], + queryFn: () => + axios + .get(`${props.api}`) + .then((res) => res.data), + }); + + if (isLoading) return `Loading ${props.api}... `; + + if (error) return "An error has occurred: " + error.message; return (
-

Hey Team! 👋

-
- -
+

---

+

API: {data.api}

+

Time from DB: {data.now}

+
{isFetching ? "Updating..." : ""}
) } +export function App() { + return ( + +

Hey Team! 👋

+ + + + ); +} + export default App