19 |
20 |
34 |
35 | )
36 | }
37 | )
38 |
--------------------------------------------------------------------------------
/examples/3-twitter-clone/src/app/components/Home.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | import { Composer } from "./Composer"
4 | import { MessageWall } from "./MessageWall"
5 |
6 | export const Home = () => (
7 | <>
8 |
9 | Share 🤯 experience...
10 |
11 |
12 |
14 | 11 |
12 |
25 |
41 | {collapsed ? null : {message.user.name}
26 |{message.text}
27 |
28 |
40 |
32 | 💙
33 |
34 | {asChild ? null : (
35 | setCollapsed((c) => !c)}>
36 | 💬
37 |
38 | )}
39 | -
18 | {store.sortedMessages.map((message) => (
19 |
Edit profile
18 | 23 | 31 | 32 | ) 33 | }) 34 | -------------------------------------------------------------------------------- /examples/3-twitter-clone/src/app/components/Replies.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { observer } from "mobx-react-lite" 3 | 4 | import { Loading, Error } from "./utils" 5 | import { Message } from "./Message" 6 | import { Composer } from "./Composer" 7 | 8 | import { useQuery } from "../models/reactUtils" 9 | import { MessageModelType } from "../models" 10 | 11 | export const Replies = observer( 12 | ({ message }: { message: MessageModelType }) => { 13 | const { data, error, loading } = useQuery(() => message.loadReplies()) 14 | return ( 15 |
16 | {error ? (
17 | {error}
18 | ) : loading ? (
19 |
31 | )
32 | }
33 | )
34 |
--------------------------------------------------------------------------------
/examples/3-twitter-clone/src/app/components/utils/Error.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react"
2 |
3 | export const Error: FC = (props) => (
4 | -
23 | {data.messages.map((message) => (
24 |
{props.children || "Something went wrong"}
5 | )
6 |
--------------------------------------------------------------------------------
/examples/3-twitter-clone/src/app/components/utils/Loading.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | export const Loading = () => ![]({require("./spinner.gif")}){kind=small}
4 |
--------------------------------------------------------------------------------
/examples/3-twitter-clone/src/app/components/utils/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Error"
2 | export * from "./Loading"
3 |
--------------------------------------------------------------------------------
/examples/3-twitter-clone/src/app/components/utils/spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mobxjs/mst-gql/ab8bd37c3cacebd6905b4842d2472cbcec1fb09e/examples/3-twitter-clone/src/app/components/utils/spinner.gif
--------------------------------------------------------------------------------
/examples/3-twitter-clone/src/app/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import * as ReactDOM from "react-dom"
3 | import { createHttpClient } from "mst-gql"
4 | import { SubscriptionClient } from "subscriptions-transport-ws"
5 |
6 | import "./index.css"
7 |
8 | import { RootStore } from "./models/RootStore"
9 | import { StoreContext } from "./models/reactUtils"
10 |
11 | import { Home } from "./components/Home"
12 | import { Profile } from "./components/Profile"
13 |
14 | const gqlHttpClient = createHttpClient("http://localhost:4000/graphql")
15 |
16 | const gqlWsClient = new SubscriptionClient("ws://localhost:4000/graphql", {
17 | reconnect: true
18 | })
19 |
20 | const rootStore = RootStore.create(undefined, {
21 | gqlHttpClient,
22 | gqlWsClient
23 | })
24 |
25 | export const App = () => (
26 | 14 | {rocket.name} ({rocket.type}) 15 |
16 |{site}
17 |{mission.name}
25 |{rocket.name}
26 |Loading...
10 | if (error) returnAn error occurred
11 | 12 | return ( 13 |
14 |
29 |
30 | )
31 | })
32 |
--------------------------------------------------------------------------------
/examples/4-apollo-tutorial/client/src/containers/book-trips.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { observer } from "mobx-react"
3 |
4 | import Button from "../components/button"
5 | import { GET_LAUNCH } from "./cart-item"
6 | import { useQuery } from "../models/reactUtils"
7 |
8 | export { GET_LAUNCH }
9 |
10 | export default observer(function BookTrips() {
11 | const { store, setQuery, data } = useQuery()
12 |
13 | if (data && data.bookTrips && !data.bookTrips.success)
14 | return {data.bookTrips.message}
15 | return ( 16 | 22 | ) 23 | }) 24 | -------------------------------------------------------------------------------- /examples/4-apollo-tutorial/client/src/containers/cart-item.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import gql from "graphql-tag" 3 | import { observer } from "mobx-react" 4 | 5 | import LaunchTile from "../components/launch-tile" 6 | 7 | import { useQuery } from "../models/reactUtils" 8 | import { LAUNCH_TILE_DATA } from "../models/" 9 | 10 | export const GET_LAUNCH = gql` 11 | query GetLaunch($launchId: ID!) { 12 | launch(id: $launchId) { 13 | ...LaunchTile 14 | } 15 | } 16 | ${LAUNCH_TILE_DATA} 17 | ` 18 | 19 | export default observer(function CartItem({ launchId }) { 20 | const { query } = useQuery(GET_LAUNCH, { variables: { launchId } }) 21 | return query.case({ 22 | error: (error) =>ERROR: {error.message}
, 23 | loading: () =>Loading...
, 24 | data: ({ launch }) =>No items in your cart
15 | ) : ( 16 |ERROR: {error.message}
, 27 | loading: () =>ERROR
, 14 | loading: () =>An error occurred
16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/4-apollo-tutorial/client/src/pages/profile.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react" 2 | 3 | import { LAUNCH_TILE_DATA, useQuery } from "../models" 4 | import { Loading, Header, LaunchTile } from "../components" 5 | import { observer } from "mobx-react" 6 | import gql from "graphql-tag" 7 | 8 | export const GET_MY_TRIPS = gql` 9 | query GetMyTrips { 10 | me { 11 | id 12 | __typename 13 | email 14 | trips { 15 | ...LaunchTile 16 | } 17 | } 18 | } 19 | ${LAUNCH_TILE_DATA} 20 | ` 21 | 22 | export default observer(function Profile() { 23 | const { query, store } = useQuery(GET_MY_TRIPS) 24 | 25 | return query.case({ 26 | error: (error) =>ERROR: {error.message}
, 27 | // render cached trips if available 28 | loading: () => (store.hasTrips ? renderTrips(store) :You haven't booked any trips
43 | )} 44 |-
14 | {data.users.map((user) => (
15 |
- 16 | {user.name} 17 | (likes: {user.likes!.join(" + ")}) 18 | 19 | ))} 20 |
All Todos
10 |12 |
Done Todos
13 | 16 | {showDoneTodos &&18 |