├── .github
└── FUNDING.yml
├── .gitignore
├── READMe.md
├── components
├── CodePart.js
└── nav.js
├── helpers
├── index.js
└── useLocalStorage.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
├── index.js
└── style.css
├── preview.png
├── public
├── cover.png
└── favicon.ico
└── yarn.lock
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: ["https://sendacoin.to/devzstudio"]
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | .env*
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | .now
--------------------------------------------------------------------------------
/READMe.md:
--------------------------------------------------------------------------------
1 | # SQL to Graphql Schema Generator
2 |
3 | ⚛️ Generate GraphQL Scheme Online From SQL Query
4 |
5 | []()
6 |
7 | Check live on https://sql-to-graphql.now.sh/
8 |
9 |
10 | Made with ❤️ by 
11 | 
12 |
13 |
14 | ## ✨ Features
15 |
16 | - Convert SQL Table To GraphQL Schema
17 |
18 | - Copy Generated Code to Clipboard
19 |
20 | - Dark Mode
21 |
22 | ## 🗒 Docs
23 |
24 | - Paste SQL Query example.
25 |
26 | ```
27 | CREATE TABLE `users` (
28 | `id` int(11) NOT NULL AUTO_INCREMENT,
29 | `username` varchar(225) NOT NULL,
30 | `password` varchar(225) NOT NULL,
31 | `email` varchar(225) NOT NULL,
32 | `avatar` varchar(225) NOT NULL,
33 | PRIMARY KEY (`id`),
34 | UNIQUE KEY `url` (`url`)
35 | ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
36 | ```
37 |
38 | - Click on the Run Button
39 |
40 | ## 🔌 Usage
41 |
42 | - Try Online : https://sql-to-graphql.now.sh/
43 |
44 | - Or Clone the repo
45 |
46 | ```
47 | git clone https://github.com/Devzstudio/SQL-to-Graphql-Schema-Generator.git
48 | ```
49 |
50 | - Install dependencies and start
51 |
52 | ```
53 | npm install
54 | ```
55 |
56 | ```
57 | npm run dev
58 | ```
59 |
60 | ## 🛣 ToDo
61 |
62 | - Add Keyboard Shortcut for Paste and Copy
63 |
64 | ## 🤝 Contributing
65 |
66 | Contributions, issues and feature requests are welcome! 😍
67 |
68 | ## Show your support
69 |
70 | Give a ⭐️ if this project helped you! 🥰
71 |
--------------------------------------------------------------------------------
/components/CodePart.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { UnControlled as CodeMirror } from 'react-codemirror2';
3 |
4 | const CodePart = ({ value, onChange, mode, readOnly = false }) => {
5 | const [editor, setEditor] = useState();
6 | const [cursor, setCursor] = useState({
7 | line: 0,
8 | ch: 0,
9 | });
10 |
11 | if (editor) {
12 | setEditor(undefined);
13 | }
14 |
15 | return (
16 |
17 | {
20 | setCursor({
21 | line: data.line,
22 | ch: data.ch + 1,
23 | });
24 | }}
25 | autoRefresh
26 | editorDidMount={(ed) => {
27 | setEditor(ed);
28 | }}
29 | onChange={(editor, data, value) => {
30 | if (onChange) onChange(value);
31 | }}
32 | value={value}
33 | height="100%"
34 | options={{
35 | mode,
36 | theme: 'material',
37 | lineNumbers: true,
38 | readOnly,
39 | }}
40 | />
41 |
42 | );
43 | };
44 |
45 | export default CodePart;
46 |
--------------------------------------------------------------------------------
/components/nav.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Sun, Moon, RotateCw } from 'react-feather';
3 |
4 | const Nav = ({ currentMode: { value }, changeMode }) => (
5 |
84 | );
85 |
86 | export default Nav;
87 |
--------------------------------------------------------------------------------
/helpers/index.js:
--------------------------------------------------------------------------------
1 | const ucwords = (string) => string.charAt(0).toUpperCase() + string.slice(1);
2 |
3 | const selectDatatype = (fieldLineRaw) => {
4 | const fieldLine = fieldLineRaw.toLowerCase();
5 |
6 | if (
7 | fieldLine.includes('varchar') ||
8 | fieldLine.includes('text') ||
9 | fieldLine.includes('char') ||
10 | fieldLine.includes('datetime')
11 | )
12 | return 'String';
13 |
14 | if (fieldLine.includes('decimal') || fieldLine.includes('float')) return 'Float';
15 |
16 | if (fieldLine.includes('tinyint') || fieldLine.includes('float')) return 'Boolean';
17 |
18 | if (
19 | fieldLine.includes('int') ||
20 | fieldLine.includes('bigint') ||
21 | fieldLine.includes('numeric') ||
22 | fieldLine.includes('real')
23 | )
24 | return 'Int';
25 | };
26 |
27 | const checkField = (lineRaw) => {
28 | const line = lineRaw.toLowerCase();
29 | const excludeKeywords = ['charset', 'constraint', 'foreign key', 'engine', 'create schema'];
30 |
31 | const isBlacklisted = excludeKeywords.some((keyword) => line.includes(keyword));
32 | if (isBlacklisted) {
33 | return false;
34 | }
35 |
36 | const dataTypes = [
37 | 'int',
38 | 'varchar',
39 | 'char',
40 | 'numeric',
41 | 'bigint',
42 | 'real',
43 | 'tinyint',
44 | 'decimal',
45 | 'text',
46 | 'float',
47 | 'datetime',
48 | ];
49 |
50 | const checkFields = dataTypes.map((it) => {
51 | if (line.includes(it)) return true;
52 | });
53 |
54 | if (checkFields.includes(true)) return true;
55 | return false;
56 | };
57 |
58 | const camelCase = (str) => {
59 | return (str.slice(0, 1).toLowerCase() + str.slice(1))
60 | .replace(/([-_ ]){1,}/g, ' ')
61 | .split(/[-_ ]/)
62 | .reduce((cur, acc) => {
63 | return cur + acc[0].toUpperCase() + acc.substring(1);
64 | });
65 | };
66 |
67 | const generateTableName = (str) => {
68 | return ucwords(camelCase(str));
69 | };
70 |
71 | const lineIsComment = (line) => {
72 | return line.startsWith('--') || line.startsWith("/*")
73 | }
74 |
75 | export { ucwords, selectDatatype, checkField, generateTableName, lineIsComment };
76 |
--------------------------------------------------------------------------------
/helpers/useLocalStorage.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 |
3 | const useLocalStorage = (key, initialValue) => {
4 | // State to store our value
5 | // Pass initial state function to useState so logic is only executed once
6 | const [storedValue, setStoredValue] = useState(() => {
7 | try {
8 | // Get from local storage by key
9 | const item = window.localStorage.getItem(key);
10 | // Parse stored json or if none return initialValue
11 | return item ? JSON.parse(item) : initialValue;
12 | } catch (error) {
13 | // If error also return initialValue
14 | console.log(error);
15 | return initialValue;
16 | }
17 | });
18 |
19 | // Return a wrapped version of useState's setter function that ...
20 | // ... persists the new value to localStorage.
21 | const setValue = (value) => {
22 | try {
23 | // Allow value to be a function so we have same API as useState
24 | const valueToStore = value instanceof Function ? value(storedValue) : value;
25 | // Save state
26 | setStoredValue(valueToStore);
27 | // Save to local storage
28 | window.localStorage.setItem(key, JSON.stringify(valueToStore));
29 | } catch (error) {
30 | // A more advanced implementation would handle the error case
31 | console.log(error);
32 | }
33 | };
34 |
35 | return [storedValue, setValue];
36 | };
37 |
38 | export default useLocalStorage;
39 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const withCSS = require('@zeit/next-css');
2 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
3 |
4 | module.exports = withCSS({
5 | webpack(config, { dev }) {
6 | if (config.mode === 'production') {
7 | if (Array.isArray(config.optimization.minimizer)) {
8 | config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
9 | }
10 | }
11 |
12 | return config;
13 | }
14 | });
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sql-graphql-schema-generator",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start"
9 | },
10 | "dependencies": {
11 | "@zeit/next-css": "^1.0.1",
12 | "codemirror": "^5.55.0",
13 | "codemirror-graphql": "^0.12.0",
14 | "graphql": "^15.3.0",
15 | "next": "9.3.2",
16 | "optimize-css-assets-webpack-plugin": "^5.0.3",
17 | "react": "^16.10.2",
18 | "react-codemirror2": "^7.2.1",
19 | "react-copy-to-clipboard": "^5.0.1",
20 | "react-dom": "16.10.2",
21 | "react-feather": "^2.0.3",
22 | "react-hotkeys-hook": "^1.5.3",
23 | "react-notify-toast": "^0.5.1",
24 | "sql-prettier": "^0.1.3",
25 | "use-dark-mode": "^2.3.1"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import useDarkMode from 'use-dark-mode';
3 | import sqlPrettier from 'sql-prettier';
4 | import dynamic from 'next/dynamic';
5 |
6 | import { CopyToClipboard } from 'react-copy-to-clipboard';
7 | import { Play, Clipboard } from 'react-feather';
8 | import { useHotkeys } from 'react-hotkeys-hook';
9 | import Notifications, { notify } from 'react-notify-toast';
10 |
11 | import Head from 'next/head';
12 | // import useLocalStorage from '../helpers/useLocalStorage';
13 |
14 | import Nav from '../components/nav';
15 | import { generateTableName, selectDatatype, checkField, lineIsComment } from '../helpers/index';
16 | import './style.css';
17 |
18 | import 'codemirror/lib/codemirror.css';
19 | import('codemirror/mode/sql/sql.js');
20 | import('codemirror-graphql/mode');
21 | import('codemirror-graphql/hint');
22 | import('codemirror-graphql/lint');
23 | import('codemirror/addon/lint/lint');
24 | import('codemirror/addon/hint/show-hint');
25 |
26 | const CodePart = dynamic(() => import('../components/CodePart'), { ssr: false });
27 |
28 | const Home = () => {
29 | const [query, setQuery] = useState();
30 | const [schema, setSchema] = useState('');
31 | const darkMode = useDarkMode(true);
32 |
33 | useHotkeys('ctrl+v', async () => {
34 | const text = await navigator.clipboard.readText();
35 | setQuery(text);
36 | });
37 |
38 | useHotkeys('ctrl+space', () => {
39 | makeSchema();
40 | });
41 |
42 | const makeSchema = () => {
43 | const newQuery = sqlPrettier.format(query);
44 |
45 | const lines = newQuery.split(/[\r\n]+/).filter(r => r.trim().length > 0);
46 |
47 | let graphqlSchema = '';
48 |
49 | for (var i = 0; i < lines.length; i++) {
50 |
51 | const currentLine = lines[i].trim().replaceAll('`', '');
52 |
53 | if(lineIsComment(currentLine)) {
54 | continue;
55 | }
56 |
57 | if (currentLine.toLowerCase().includes('create table')) {
58 | const tableName = currentLine
59 | .toLowerCase()
60 | .replace('create table', '')
61 | .replace(/[^\w\s]/gi, '');
62 | graphqlSchema += `type ${generateTableName(tableName.trim())} {\r\n`;
63 | }
64 |
65 | if (currentLine.startsWith(')')) {
66 | graphqlSchema += `}\r\n\r\n`;
67 | }
68 |
69 | if (checkField(currentLine)) {
70 | const fieldLine = currentLine;
71 | const getField = fieldLine.substr(0, fieldLine.indexOf(' ')).replace(/[^\w\s]/gi, '');
72 | const notNull = fieldLine.includes('NOT NULL');
73 | let type = '';
74 | if (getField === 'id' || getField.includes('_id')) type = 'ID';
75 | else type = selectDatatype(fieldLine.toLowerCase());
76 | graphqlSchema += ` ${getField}: ${type}${notNull ? '!' : ''}\r\n`;
77 | }
78 |
79 | setSchema(graphqlSchema);
80 | }
81 | };
82 |
83 | return (
84 |
85 |
86 |
SQL to GraphQL Schema Generator
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
121 |
Run
122 |
127 | notify.show('Copied!', 'success')}>
128 |
131 |
132 | Copy
133 |
134 |
135 | )}
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |