Andmapco - dev team

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

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 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...

  1. To address these problems, we setup route-based code splitting using the  react-loadable  npm package. We then moved to  React.lazy  and  Suspense   despite it not supporting server-side rendering at that time. We switched because there was now a built-in way to handle dynamic imports. 2. Rendering these items was putting a lot of strain on the browser and we saw a lot of  jank . To fix this, we used an npm module called  react-window  which provides a higher-order component that controls the rendering of long lists. It does not render items that are not immediately visible. It supports lazy loading, custom properties, and event handlers. This gave us list rendering at 60fps. https://www.apollographql.com/docs/react/pagination/core-api/ https://codesandbox.io/s/5wqo7z2np4?file=/src/App.js:0-2108 import React , { createRef , Fragment , PureComponent } from "react" ; import { FixedSizeList as List } from "react-window" ...

  https://juliangaramendy.dev/blog/use-promise-subscription React.useEffect(() => { let isSubscribed = true; fetchBananas() .then(bananas => (isSubscribed ? setBananas(bananas) : null)) .catch(error => (isSubscribed ? setError(error.toString()) : null)); return () => (isSubscribed = false); }, []); https://juliangaramendy.dev/blog/managing-remote-data-with-swr https://betterprogramming.pub/why-you-should-be-separating-your-server-cache-from-your-ui-state-1585a9ae8336 https://www.youtube.com/watch?v=oWVW8IqpQ-A How severe is this warning? Since this is a warning, it is not a showstopper. But bear in mind that your asynchronous code could potentially cause performance issues or memory leaks. How can I prevent the issue? The issue represents a state management design issue in your application. There are many ways to solve state management design issues. Here are a few: Develop an “isMounted” workaround to the problem (not recommended) Move your s...

  const useStyles = makeStyles(theme => ({ root: { display: 'flex' , flexWrap: 'wrap' , justifyContent: 'space-around' , overflow: 'hidden' , backgroundColor: theme.palette.background.paper, }, gridList: { [theme.breakpoints.up( 'md' )]: { width: 500 , height: 450 , }, [theme.breakpoints.down( 'sm' )]: { flexWrap: 'nowrap' , }, transform: 'translateZ(0)' , }, })) const PhotosGrid: React.FC<Props> = ({ photos }) => { const classes = useStyles() const theme = useTheme() const matches = useMediaQuery(theme.breakpoints.down( 'sm' )) return ( < Box className = { classes.root } > < GridList           cellHeight = { matches ? 100 : 200 }           spacing = { 1 } className = { classes.gridList } > { photos.map(tile => ( < GridListTile key = { tile.photoUrl } cols = { matches ? ...