Skip to main content

Posts

Showing posts from 2021

debug React web app on iphone with Chrome

open Chrome on your iphone: one tab: run Chrome:inspect another tab: run your site source from: https://blog.chromium.org/2019/03/debugging-websites-in-chrome-for-ios.html Tweet Tweet

Web Crypto API - Node 16

  Experimental Web Crypto API The Web Crypto API is the newer more well defined version of the Crypto library for JavaScript. All of the new Web Crypto methods are available on the  subtle  interface. Many browsers used an interface called  Crypto  without having a specific specification. The Web Crypto API adds a standard to the  Crypto  library. import { webcrypto } from 'crypto' ; const { subtle } = webcrypto ; ( async function ( ) { const key = await subtle . generateKey ( { name : 'HMAC' , hash : 'SHA-256' , length : 256 } , true , [ 'sign' , 'verify' ] ) ; const digest = await subtle . sign ( { name : 'HMAC' } , key , 'I love node.js' ) ; console . log ( digest ) ; } ) ( ) ;

good practice - react project - array - switch - update object of array

  setListing((prevState: any) => { const todos = [...prevState.listingTodos] const newTodos = todos.map(todo => { return { ...todo, expanded: todo.tabValue === todoValue, } }) return { ...prevState, listingLoading: false , listingTodos: newTodos, } }) // bad practice const array = [ [ [ 'Shoaib Mehedi' ] ] ] array . forEach ( ( firstArr ) => { firstArr . forEach ( ( secondArr ) => { secondArr . forEach ( ( element ) => { console . log ( element ) ; } ) } ) } ) // good practice const array = [ [ [ 'Shoaib Mehedi' ] ] ] const getValuesOfNestedArray = ( element ) => { if ( Array . isArray ( element ) ) { return getValuesOfNestedArray ( element [ 0 ] ) } return element } getValuesOfNestedArray ( array ) const { role } = user const components = { ADMIN : AdminUser , ...

apollo client v3 - clean up non-needed packages

v3: https://github.com/apollographql/apollo-client clean up: ApolloProvider useQuery, useMutation, useApolloClient Apollo Client >= 3 includes React hooks functionality out of the box. You don't need to install any additional packages. https://www.apollographql.com/docs/react/api/react/hooks/ //import { ApolloProvider } from '@apollo/react-hooks' import { ApolloProvider } from '@apollo/client/react' //import { useQuery, useMutation, useApolloClient } from '@apollo/react-hooks' import { useQuery, useMutation, useApolloClient } from '@apollo/client' How i can CATCH any error (network and graphql), and prevent promise.reject()  https://github.com/apollographql/apollo-client/issues/6469 npm uninstall @apollo/react-hooks https://github.com/apollographql/apollo-link npm uninstall apollo-link npm uninstall apollo-client npm uninstall apollo-link-error npm uninstall apollo-link-http npm uninstall apollo-link-ws npm uninstall apollo-cache-inmemory

renew token on graphQL error - apollo client with Firebase authentication

const errorLink = onError( ( { graphQLErrors, networkError, operation, forward } ) => {  https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8 apollo client with Firebase authentication https://dgraph.io/docs/graphql/todo-app-tutorial/todo-firebase-jwt/ Concurrent Requests https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8 const errorLink = onError( ( { graphQLErrors, networkError, operation, forward } ) => { if (graphQLErrors) { for ( let err of graphQLErrors) { switch (err.extensions.code) { case 'UNAUTHENTICATED' : // error code is set to UNAUTHENTICATED // when AuthenticationError thrown in resolver let forward$; if (!isRefreshing) { isRefreshing = true ; forward$ = fromPromise( getNewToken() .then( ( { accessToken, refreshToken } ) => { // Store t...

Apollo client - cache APIs - auto update cache - erase cache - reactive variables - deletion - addition

Apollo Client 3  Local only fields Reactive Variables const cache = new InMemoryCache ( { typePolicies : { Todo : { // If one of the keyFields is an object with fields of its own, you can // include those nested keyFields by using a nested array of strings: keyFields : [ "date" , "user" , [ "email" ] ] , } } , } ) ; This internal data is intended to be easily  JSON-serializable , so you can take a snapshot with  cache.extract() , save it somewhere, and later restore with  cache.restore(snapshot) . Here’s a mutation called  EditTodo  that returns the new  todo  value in the mutation response. mutation EditTodo ( $id : Int ! , $text : String ! ) { editTodo ( id : $id , text : $text ) { success todo { # <- Returning it here id text completed } error { ... on TodoNotFoundError { message } ... on TodoValidationE...