Skip to content

Instantly share code, notes, and snippets.

View yaralahruthik's full-sized avatar
🏠
My cat put a bug in my code

Hruthik Reddy Yarala yaralahruthik

🏠
My cat put a bug in my code
View GitHub Profile
@yaralahruthik
yaralahruthik / index.js
Last active January 30, 2021 15:12
Basic Node.js Application
const express = require('express') \\ You'll have to install it by running npm i express in the command prompt
const app = express()
const port = 3000
app.get('/', (req, res) => res.send('<html><body>Demonstration Input Field <hr> <input value="' + req.query.name + '"></body></html>'))
app.listen(port, () => console.log(`Sample App listening at http://localhost:${port}`))
import { useEffect, useState } from 'react';
const ReactWay = () => {
const [apiData, setApiData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
const response = await fetch(
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const todoApi = createApi({
reducerPath: 'todoApi',
baseQuery: fetchBaseQuery({
baseUrl: 'https://jsonplaceholder.typicode.com/',
}),
endpoints: (builder) => ({
getTodos: builder.query({
query: () => 'todos',
import { configureStore } from '@reduxjs/toolkit';
import { todoApi } from './services/todo';
export const store = configureStore({
reducer: {
[todoApi.reducerPath]: todoApi.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(todoApi.middleware),
});
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
import { useGetTodosQuery } from '../services/todo';
const ReduxWay = () => {
const { data, error, isLoading } = useGetTodosQuery();
return (
<div>
<h1>Redux Way</h1>
{error ? (
<>Oh no, there was an error</>
) : isLoading ? (
export const getTodos = () => {
return fetch('https://jsonplaceholder.typicode.com/todos').then((res) =>
res.json()
);
};
import ReactQueryWay from './components/ReactQueryWay';
import { QueryClient, QueryClientProvider } from 'react-query';
const queryClient = new QueryClient();
const App = () => {
return (
<>
<QueryClientProvider client={queryClient}>
<ReactQueryWay />
import { useQuery } from 'react-query';
import { getTodos } from '../services/todoReactQuery';
const ReactQueryWay = () => {
const { isLoading, error, data } = useQuery('todos', getTodos);
if (isLoading) return 'Loading...';
if (error) return 'An error has occurred: ' + error.message;
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}>
<Text style={styles.title}>Hello World!</Text>
</View>
);
const styles = StyleSheet.create({