DS Log
In my blog, I delve into the world of programming web technologies, Linux, Unix-like, and graphic design using free tools on Linux.
KINGCODE
KingCode Editor (ex Texty Editor) is my project developed using Java Swing. Project is still in development and in beta version. I plan to add additional features focused for PYTHON, PHP, JAVA, C, JS and BASH.
Read more ↗
VUE on Linux
In this guide, I'll walk you through the step-by-step process of setting up Vue.js on your Linux system, empowering you to create dynamic and interactive web applications. Let's harness the power of Vue.js together on the Linux platform!
Read more ↗
Symfony PHP
Dive into the world of Symfony PHP with this comprehensive introduction. In this guide, you'll learn the essential steps to create and manage posts and users, empowering you to build dynamic web applications with ease.
Read more ↗
Trying Linux from Windows
How to set up a PHP development server on Ubuntu 22.04
Text editors
List of text editors for developers.
Read more ↗
Fonts
Important fonts everyone needs to know.
Read more ↗
Try Linux from Windows
Here are some quick videos I made showing how to try out Linux Mint on Windows.
Read more ↗
Tuesday, July 16, 2024
GraphQL
GraphQL is a query (query=query, google translate) language. Query means in the same sense as database query. So, give me a specific table, column and rows. The aim and purpose of this is to simplify working with REST APIs. The GraphQL API comes with a visual interface where you can see the schema or architecture of the entire API.
Example
For example we will use http://api.spacex.land/graphql/
If we write:
{capsules {
id
}}
We get a list of all "capsules".
{
"data": {
"capsules": [
{
"id": "C105"
},
{
"id": "C101"
},
...
Simply! Let's put together a slightly more complicated query:
{
capsules {
id
landings
status
missions {
name
}
}
}
The result:
{
"data": {
"capsules": [
{
"id": "C105",
"landings": 1,
"status": "unknown",
"missions": [
{
"name": "CRS-3"
}
]
},
{
"id": "C101",
"landings": 1,
"status": "retired",
"missions": [
{
"name": "COTS 1"
}
]
},
...
How to use?
React
npx create-react-app my-app
cd my-app
npm install @apollo/client graphql
npm start
index.js
import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider, ApolloClient, InMemoryCache } from "@apollo/client";
import App from "./App";
const client = new ApolloClient({
uri: "https://api.spacex.land/graphql/",
cache: new InMemoryCache()
});
const rootElement = document.getElementById("root");
ReactDOM.render(
,
rootElement
);
App.js
import React from "react";
import { useQuery, gql } from "@apollo/client";
const query = gql`
{
capsules {
id
landings
status
missions {
name
}
}
}
`;
export default function App() {
const { data, loading, error } = useQuery(query);
if (loading) return "Loading...";
if (error) return {error.message}
console.log(data);
return (
SpaceX Capsules
{data.capsules.map((capsule) => (
- {capsule.id} => {capsule.status}
))}
);
}
Vanilla JS
For plain JS we use lib:
https://github.com/f/graphql.js
From that package, we need the file "graphql.min.js" and "index.html" of this content:
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="graphql.min.js"></script>
</head>
<body onload="main()">
<h1>Hello World</h1>
<main></main>
</body>
</html>
<script>
const main = async () => {
var graph = graphql("https://api.spacex.land/graphql/", {
alwaysAutodeclare: true,
asJSON: true,
debug: true
})
var capsulesData = graph(` query
{
capsules {
id
landings
status
missions {
name
}
}
}
`);
const capsulesGql = await capsulesData();
const capsules = capsulesGql.capsules;
let mainElement = document.getElementsByTagName('main')[0];
for (let i=0; i<capsules.length; i++){
let key = capsules[i].id;
let status = capsules[i].status;
let landings = capsules[i].landings;
mainElement.innerHTML += `
<div key="${key}"> ${key} ${status} ${landings}</div>
`;
}
}
</script>
