Plots herinner ik me dat citaat als ik het heb over Optimistic UI. Voordat ik begrijp wat Optimistic UI is, vroeg ik me af hoe een reactie zo snel kon zijn. 😳 Kijk bijvoorbeeld naar Instagram zoals UI.

Er is geen saai laadpictogram. Als we op de like-knop drukken, wordt het bericht meteen geliked. Dat is toch geweldig?

Dus, hoe werkt een optimistische gebruikersinterface?

Laten we het geheim achter de Optimistic UI-truc onthullen.

"Simuleer de resultaten" betekent dat we eerst de reactie moeten vervalsen, voordat we de echte ontvangen. Dat is het. 💁‍♂️

Voorbeeld

We zouden dit patroon gemakkelijk kunnen implementeren met Apollo Client. Dit is een van de voordelen van het gebruik van GraphQL, omdat het verzoek en het antwoord eerder in het query- en mutatieschema zijn gedefinieerd. We zouden het antwoord gemakkelijk kunnen vervalsen en ervoor zorgen dat de gegevens consistent worden met het daadwerkelijke antwoord wanneer het binnenkomt.

const LIKE_POST = gql`
  mutation LikePost($postID: ID!) {
    likePost(postID: $postID) {
      id
      __typename
      likers
    }
  }
`

const Posts = () => {
  const username = useSelector(state => state.auth.username)
  const [mutate] = useMutation(LIKE_POST)
  return (
    <Comment
      updateComment={({ id, likers }) =>
        mutate({
          variables: { postID: id },
          optimisticResponse: {
            __typename: "Mutation",
            likePost: {
              id,
              __typename: "Post",
              likers: [...likers, username]
            }
          }
        })
      }
    />
  )
}

Nu, deze truc kon ons niet meer verbazen.