写真が千の言葉の価値がある場合、インタラクティブなデモは価値がなければなりません... アプリの目的を理解するために、流行語をスクロールするのが好きですか？おそらくそうではありません。そして、私は私の最新の情熱プロジェクトのために、すべての勇敢さを書くことを気にしませんでした。だから私はより興味深いソリューションを追求しました：私のアプリを独自のランディングページにネストして、ユーザーが探索するために！

Reactの複合性のおかげで、

ルートアプリコンポーネントをレンダリングして1日と呼ぶことができます：
Export const interactivedemo =（）=> { 戻る （ ）） }

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

をナビゲートします
1. デモアプリは実際のデータを取得します。
ユーザーが何を見ているのかは明らかではないかもしれません
3. それらを解決しましょう。 React Router V6とApollo GraphQLを使用したいのですが、テクノロジーに関係なく概念は適用されます。

注MemoryRouterを使用して、デモが内部的にナビゲートする間、ブラウザが同じページに残るように使用します。

 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
        
            
                
            
        
    )
}

デモアプリに偽のデータを提供するために、Client Appを使用してクライアントアプリ内に偽の「バックエンド」を維持し、モッククライアントまたはサーバーを介して（実装に応じて）提供します。これは、残りのアプリコードに最小限に浸潤しているため、手動テストにデモを使用することもできます。

'@apollo/client'から{inmemorycache}をimport Import {mock-apollo-client」から{createmockclient、createmocksubscription} {usememo、usestate}から「react」からインポート //クライアントが実際のサーバーに送信するGraphQLドキュメント '..///gql/getfriends.gql'からget_friendsをインポートする '../../gql/addfriend.gql'からadd_friendをインポートする //簡素化された例 const constemoclient =（）=> {export const [friends、setfriends] = uesestate [{ __typename： 'user'、 ID：1、 名前：「ニック」、 }] //キャッシュはクライアント間で持続する必要があります const cache = usememo（（）=> { //実際のApolloクライアントに提供する同じキャッシュ構成である必要があります 新しいinmemorycache（）を返します }、[]） //データが変更されるたびにモッククライアントを再作成する必要があります //リセットリクエストハンドラーをサポートしていないためです。 const mockclient = usememo（（）=> { const client = createmockclient（{cache}） client.setRequestHandler（get_friends、（）=> promise.resolve（{{ データ： { 友達：友達 } }）） client.setRequestHandler（add_friend、（{user}）=> { setfriends（（prev）=> prev.concat（[user]）） promise.resolveを返す（{ データ： { AddFriend：ユーザー } }） }） クライアントを返します }、 [友達]） mockclientを返します }

その後、ナビゲーションを使用したように、モッククライアントでデモを新しいプロバイダーに包みます：

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
}

代わりにモックサーバーを使用した場合、そのURLをデモアプリの実際のクライアントに挿入します。

 import { ApolloProvider } from '@apollo/client'

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

操作コンポーネントがあるので、ランディングページ内にレンダリングし、完了です！



エクスポートconst landing =（）=> {
    戻る （
        

            {/ * ... */}
            
            {/ * ... */}
        
    ））
}