ลองเล่นๆกับ graphQL (ตอน 2)

สวัสดีครับ หายไปหลายวันวันนี้กลับมาอัพเดทตามทีสัญญาไว้ครับ

จากตอนที่แล้ว :>> ลองเล่นๆกับ graphQL

ก่อนจะไปติดตั้ง graphQL ขอมาที่เรื่องที่ยังค้างไว้ในตอนที่แล้ว นั่นคือ mutation หรือ คือการนำข้อมูลเข้า (ตอนที่แล้วมีแต่เอาข้อมูลออกมา)

มาดูที่ GraphiQL จากตอนที่แล้ว ไปที่ Doc => mutation ก็จะมีให้ลองเล่นประมาณนี้

เหมือนเดิม ใน doc ตัวแปรไหนมี ! อยู่นั่นคือเราจำเป็นต้องใส่ไปด้วยนะครับ

มาลองเอาข้อมูลเข้ากัน

mutation {
  createAuthor(
    _id: "00000001",
    name: " hoi story",
    twitterHandle: "@theHoiStroty"
  ) {
    _id
  }
}

ผลที่ได้

ลดกดซ้ำอีกรอบ

Error เพราะว่า _id ซ้ำ (ขึ้นอยู่กับการเขียนโปรแกรมของเรา)

เราสามารถเลือกได้ด้ว่าจะ return อะออกมาบ้างหลังจาก save แล้ว

ถ้า save สำเร็จก็จะ return id, name มา (ถ้าไม่ได้ก็ error)

มาลองติดตั้งกันเถอะ

ก่อนอื่นต้องบอกก่อนว่า ผมจะใช้ Node.js ในการติดตั้งนะครับ ซึ่งจริงๆ GraphQL นั้นรองรับหลายภาษา ดูเพิ่มเติมได้ที่นี่ graphql.org/code/

ก่อนอื่นในเครื่องเราต้องมี node.js ก่อนนะครับใครไม่มีไปติดตั้งกันซะ

ทีนี้เราจะมาติดตั้ง GraphiQL ไว้ลองเล่นกัน

ซึ่งสามารถดูได้ที่นี่ https://github.com/graphql/graphiql

แต่เพื่อความง่ายผมได้ทำตัวเริ่มต้นไว้ให้แล้วครับ (ตัดหลายๆอย่างที่ไม่จำเป็นต้องใช้ออกไปก่อน)

ไป Clone มาที่

https://github.com/SupachaiChaipratum/graphql-todo/tree/4e4d21eaa7eaf696079aff52e20cc46548aa194e

จากนั้นพิมพ์คำสั่ง

cd graphql-todo
npm install
npm start

จากนั้นไปที่ Browser เข้า url : http://localhost:3000/

จะได้ หน้าตาแบบนี้

ทีนี้ลองมาดู code ที่ไฟล์ schema.js

code ชุดนี้เป็นการสร้างฟังก์ชั่นชื่อ hello รับ parameter เป็น name

ลองไปดูที่ Doc กัน

ทีนี้มาลองเรียกใช้งานเลย

ได้ผลออกมาแล้ว แค่นี้เราก็ได้ฟังก์ชั่นง่ายๆไว้เรียกใช้งานแล้ว

ต่อมาผมจะลองอะไรที่มันยากขึ้นละกัน

จะลองทำ Todos ละกัน ( classic มากกกก)

ก่อนอื่นสร้าง ไฟล์ /data/todos.js

มีข้อมูลเริ่มต้นแบบนี้

และก็มาสร้างฟังก์ชั่นกันสำหรับ list todo ทั้งหมดออกมากัน

GraphQLNonNull เป็นการบอกว่า ต้องมีค่านะ ถ้าไม่มีจะ error ทันที

อย่าลืม 
import TodosList from './data/todos';
และเพิ่ม import GraphQLBoolean เพิ่ม ที่หัวไฟล์

จากนั้นมาดูกันที่ browser กัน

ลองทดสอบกัน

ทีนี้มาลองเอาข้อมูลเข้ากันบ้าน

ก่อนอื่นเหมือนเดิมสร้างฟังก์ชั่นสำหรับใช้งานก่อน

ฟังก์ชั่นนี้รับ 2 ค่า คือ titile และ completed ( จะไม่ใส่ก็ได้ ถ้าไม่ใส่จะกำหนดค่าเริ่มต้นให้เป็น false )

และที่ท้ายไฟล์ ต้องเพิ่ม Mutation ที่ Schema ด้วยแบบนี้

จากนั้นไปที่หน้าจอเหมือนเดิม

มี Mutation เพิ่มมาแล้ว

ลองเอาข้อมูลเข้ากัน

ได้แล้ว ทีนี้ลองเอาค่าทั้งหมดออกมาดูกัน

เสร็จแล้วทีนี้เราก็ได้ GraphQL ไว้เล่นกันแล้ว

น่าจะพอเห็นภาพของ GraphQL นะครับ

ในบทความนี้เป็นการเก็บข้อมูลลง Memory เฉยๆนะครับ ปิดโปรแกรมไปข้อมูลก็หาย ถ้ายังไงถ้ามีเวลาตอนหน้าผมจะมาลองต่อ Database ให้ดูกันครับ

โค้ดทั้งหมดสามารถดูได้ที่นี่นะครับ GitHub >< graphql-todo

ที่มา : http://graphql.org/ , https://learngraphql.com/