? ?? ??? ? ?? ??? ? ??? ???, ??? ??? ??? ??... ?? ??? ????.

?? ??? ???? ?? ???? ????? ?? ??????? ??? ??? ?? ????. ??? ?? ?? ?? ?? ????? Wanna? ?? ? ?? ???? ?? ?? ?????. ??? ?? ? ???? ???? ??????. ???? ??? ? ??? ?? ?? ??? ?? ? ?? ????? ????!

??

React? ??? ??? ?? ??? ?? ? ?? ??? ????? ??? ?? ? ????.

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

??? ? ?? ??? ???? ???.

1. ?? ?? ??? ?? ?? ?????
2. ?? ?? ?? ???? ????? ????? ??? ???? ?? ? ????
3. ???? ?? ?? ??? ???? ?? ? ????

? ??? ??? ???. React Router v6? Apollo GraphQL? ???? ??? ??? ???? ??? ?????.

??

?? ?? ??? ?? ?? ???? ?? ?? ?? ??? ?? ?????.

+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
+       <UNSAFE_LocationContext.Provider value={null}>
+           <MemoryRouter initialEntries={['/app']}>
                <App />
+           </MemoryRouter>
+       </UNSAFE_LocationContext.Provider>
    )
}

Demo? ????? ???? ?? ????? ??? ???? ????? MemoryRouter? ?????.

???

?? ?? ?? ???? ???? ?? ??? useState? ???? ????? ? ?? ?? "???"? ???? ?? ?? ????? ?? ??(??? ?? ??)? ?? ?????. ?? ??? ? ??? ?? ???? ???? ?? ???? ?? ??? ??? ?? ????. ??? ??? ? ?? ?????.

?? mock-apollo-client? ??????. REST ?? tRPC? ?? nock? ?? ?? ??? ? ????. ???? ???? ?? ???? ??? ? ??? ????.

?? ?? ???? ?? ???? ???? ???? ?? ???? ???? ???? ?? ?????? ????.

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
}

?? ?? ????? ????? ?? ?????? ???? ? ???? ??? ?????.

+import { ApolloProvider } from '@apollo/client'

export const InteractiveDemo = () => {
+   const demoClient = useDemoClient()
    return (
+       <ApolloProvider client={demoClient}> 
            <UNSAFE_LocationContext.Provider value={null}>
                <MemoryRouter initialEntries={['/app']}>
                    <App />
                </MemoryRouter>
            </UNSAFE_LocationContext.Provider>
+       </ApolloProvider>
    )
}

?? ?? ??? ??? ?? ?? URL? ?? ?? ?? ?????? ?????.

???

??? ???! ?? ??? ??? ?? ??? ?? ????? ??? ??? ?? ? ?????

Wanna? ??? ????? ??? ??? ??? ??? ?????? ??????. ?? ?? ?? ???? ???? ??(?: ?? ??? ????? ?? ?? ??)? ???? ??? devices.css? ??????. ??? ???? ?? ???? ????? React? ???? ?????? React-device-frameset? ???????.

?? ??/??? ???? ?? UI? ???? ???? ??? ??? ??? ??? ?????. Wanna??? ? ??? ? ? ??/??? ???? ???? ????. visjs-html-nodes? ???? ?? ??? ???? ???? ???? "?? ?????".

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

? ??? ?? ??? ?? ??: React SPA? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!