Se uma imagem vale mais que mil palavras, uma demonstração interativa deve valer a pena ... um milhão?

você gosta de rolar através das palavras -chave para entender o objetivo de um aplicativo? Provavelmente não. E eu não me importava em escrever todo o meu mais recente projeto de paixão, Wanna. Então, eu persegui uma solução mais interessante: ninho meu aplicativo dentro de sua própria página de destino para os usuários explorarem!

Implementação

graças à composibilidade do React, podemos quase simplesmente renderizar nosso componente do aplicativo root e chamá -lo de dia:

export const InteractiveDemo = () => {
    return (
        
    )
}

No entanto, você terá alguns problemas:

1. A navegação do aplicativo de demonstração navegará no aplicativo real
2. O aplicativo de demonstração recuperará dados reais, que podem falhar ou não mostrá -los bem
3. pode não ser óbvio para os usuários o que eles estão olhando para

Vamos resolver esses. Wanna Usa o React Router V6 e Apollo GraphQL, mas os conceitos se aplicam independentemente da tecnologia.

Navegação

para separar a navegação do aplicativo de demonstração do aplicativo real, envolvemos dentro de outro provedor de navegação:

 import { MemoryRouter, UNSAFE_LocationContext } from 'react-router'

export const InteractiveDemo = () => {
    return (
        // Hack to nest MemoryRouter inside BrowserRouter.
        // https://github.com/remix-run/react-router/issues/7375
        
            
                
            
        
    )
}

Observe que usamos um MemoryRouter para que o navegador permaneça na mesma página enquanto a demonstração navega internamente.

Dados

Para fornecer ao aplicativo de demonstração dados falsos, mantemos um "back -end" falso dentro do aplicativo cliente com o uso de uso e o servimos por meio de um cliente ou servidor simulado (dependendo da implementação). É minimamente invasivo para o restante do código do aplicativo e até nos permite usar a demonstração para testes manuais - muito útil quando itera rapidamente.

usei Mock-Apollo-Client; Para descanso ou TRPC, você pode usar algo como Nock. Eles são feitos para testes automatizados, mas são exatamente o que precisamos aqui.

Primeiro, criamos um cliente simulado cuja solicitação os manipuladores consultam e muta dados de uma maneira que imita o back -end real:

import { InMemoryCache } from '@apollo/client'
import { createMockClient, createMockSubscription } from 'mock-apollo-client'
import { useMemo, useState } from 'react'
// GraphQL documents that our client sends to the real server
import GET_FRIENDS from '../../gql/getFriends.gql'
import ADD_FRIEND from '../../gql/addFriend.gql'

// Simplified example
export const useDemoClient = () => {
    const [friends, setFriends] = useState[{
        __typename: 'User',
        id: 1,
        name: 'Nick',
    }]

    // Cache should persist across clients
    const cache = useMemo(() => { 
        // Should be the same cache configuration you provide to your real Apollo client
        return new InMemoryCache() 
    }, [])

    // We need to recreate the mock client whenever the data changes
    // because it doesn't support resetting request handlers.
    const mockClient = useMemo(() => {
        const client = createMockClient({ cache })

        client.setRequestHandler(GET_FRIENDS, () => Promise.resolve({
            data: {
                friends: friends
            }
        }))
        client.setRequestHandler(ADD_FRIEND, ({ user }) => {
            setFriends((prev) => prev.concat([user]))
            return Promise.resolve({
                data: {
                    addFriend: user
                }
            })
        })

        return client
    }, [friends])

    return mockClient
}

Então, assim como fizemos com a navegação, envolvemos nossa demonstração em um novo provedor com nosso simulado cliente:

 import { ApolloProvider } from '@apollo/client'

export const InteractiveDemo = () => {
    const demoClient = useDemoClient()
    return (
         
            
                
                    
                
            
        
    )
}

Se você usou um servidor simulado, injetaria seu URL no cliente real do aplicativo de demonstração.

 Por fim, ajuda a ter uma animação para que claramente não seja uma imagem estática. Por exemplo, querer sugestões continuamente do tipo fantasma no campo de entrada da atividade. 



  
  
  Integração


!


 export const Landing = () => {
    retornar (
        

            {/ * ... */}
            
            {/ * ... */}
        
    )
}