Skip to content

Instantly share code, notes, and snippets.

View antoniel's full-sized avatar
👾

Antoniel Magalhães antoniel

👾
  • Brazil
View GitHub Profile
@gragland
gragland / use-optimistic-mutation-example.ts
Last active March 28, 2025 17:18
useOptimisticMutation for React Query. Optimistically update data in multiple locations with rollback on error.
import axios from 'axios'
import { useOptimisticMutation } from "./useOptimisticMutation.ts"
type Response = boolean
type Error = unknown
type MutationVariables = {itemId: string}
type Items = {id: string; name: string}[]
type Likes = {itemId: string}[]
type History = {type: string}[]
@pingrishabh
pingrishabh / useOptimisticUpdate.js
Created September 24, 2023 08:36
Simple hook to perform optimistic updates with react-query
import { useCallback } from "react";
import { useQueryClient } from "@tanstack/react-query";
export default function useOptimisticUpdate() {
const queryClient = useQueryClient();
return useCallback(
async (queryKey, updater) => {
await queryClient.cancelQueries({ queryKey });
@intergalacticspacehighway
intergalacticspacehighway / FlatListGapExample.jsx
Created February 28, 2023 01:14
Add gap in FlatList items with numColumns
import {Dimensions, FlatList, View} from 'react-native';
const screenWidth = Dimensions.get('window').width;
const numColumns = 2;
const gap = 5;
const availableSpace = screenWidth - (numColumns - 1) * gap;
const itemSize = availableSpace / numColumns;
const renderItem = ({item}) => {
@dan-cooke
dan-cooke / useLazyQuery.ts
Created February 9, 2022 18:57
Fully typed useLazyQuery for `react-query`
import { useCallback, useState } from 'react';
import {
QueryFunction,
QueryKey,
useQuery,
UseQueryOptions,
UseQueryResult,
} from 'react-query';
type UseQueryParams = Parameters<typeof useQuery>;
@sibelius
sibelius / suspenseErrors.ts
Created May 7, 2021 11:56
Suspense Code with Errors
import { Suspense, useState, useEffect } from 'react';
const SuspensefulUserProfile = ({ userId }) => {
const [data, setData] = useState({});
useEffect(() => {
fetchUserProfile(userId).then((profile) => setData(profile));
}, [userId, setData])
return (
<Suspense>
<UserProfile data={data} />
@sibelius
sibelius / awsLamdbaExperience.md
Last active October 31, 2023 00:09
AWS Lamdba Learning Path - What do you need to learn about aws lambdas?
  • learn how to bundle backend using webpack in a single bundle (check this https://gist.github.com/jgcmarins/2860f547f5d785dce24ca0eadbe3abdd)
  • learn how to automate lamdba deploys using serveless or aws cdk (github actions)
  • learn how to configure and automate api gateway
  • learn how to automate tests lambdas using jest
  • learn how to configure, automate and use RDS Proxy to fast database workflow in lamdbas (also cache database connections)
  • how the performance gain using RDS Proxy over normal database usage
  • learn about cold start and lambda statefull (https://www.swyx.io/stateful-serverless/)
  • expose a CRUD api in lamdba
  • put everything on open source (github)
  • write a blog post about each of the topics above
@sibelius
sibelius / StorybookNextRouter.tsx
Created November 25, 2020 11:10
NextRouter Provider to be used on Storybook
import { RouterContext } from 'next/dist/next-server/lib/router-context'
import Router from 'next/router'
import React from 'react'
Router.router = {
route: '/',
pathname: '/',
query: {},
asPath: '/',
push(url, as, options) {
# Luke's config for the Zoomer Shell
# Enable colors and change prompt:
autoload -U colors && colors
PS1="%B%{$fg[red]%}[%{$fg[yellow]%}%n%{$fg[green]%}@%{$fg[blue]%}%M %{$fg[magenta]%}%~%{$fg[red]%}]%{$reset_color%}$%b "
# History in cache directory:
HISTSIZE=10000
SAVEHIST=10000
HISTFILE=~/.cache/zsh/history