23 | Cart - Total Price: $ 24 | {cart.items?.reduce( 25 | (acc, item) => acc + item.quantity * item.product.price, 26 | 0, 27 | )} 28 |
29 |-
30 | {cart.items?.map(
31 | (cartItem, i) =>
32 | cartItem &&
33 | cartItem.product && (
34 |
{category.name}
22 |-
23 | {category.products.map((product, i) => (
24 |
31 | {product.name} - ${product.price} 32 |
33 | {!props.noAddToCart && ( 34 | 35 | )} 36 | {product.description && ( 37 |{product.description}
38 | )} 39 |SpaceX Launches
18 |-
53 | {result.data?.launches.nodes.map(
54 | (node) => node &&
Welcome to Fuse
12 | Try the Streaming SSR example 13 | Try the RSC example 14 |SpaceX Launches
41 |-
42 | {result.data?.launches.nodes.map(
43 | (node) => node &&
{node.name}
32 | {node.launchDate && ( 33 |34 | Launched at {new Date(node.launchDate).toUTCString()} 35 |
36 | )} 37 | 38 |
24 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/examples/spacex/components/Location.tsx:
--------------------------------------------------------------------------------
1 | import { FragmentType, graphql, useFragment } from '@/fuse'
2 |
3 | const SiteLocationFields = graphql(`
4 | fragment SiteLocationFields on Location {
5 | latitude
6 | longitude
7 | name
8 | region
9 | }
10 | `)
11 |
12 | export const Location = (props: {
13 | location: FragmentType{result.name}
25 |Status: {result.status}
26 |{result.details}
27 | {result.location &&
19 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/examples/spacex/components/PageNumbers.module.css:
--------------------------------------------------------------------------------
1 | .list {
2 | display: flex;
3 | margin: 0;
4 | margin-top: 12px;
5 | list-style: none;
6 | }
7 |
8 | .pageNumber {
9 | background: none;
10 | color: inherit;
11 | border: none;
12 | padding: 0;
13 | font: inherit;
14 | cursor: pointer;
15 | outline: inherit;
16 | padding: 8px;
17 | }
18 |
19 | .active {
20 | text-decoration: underline;
21 | }
22 |
--------------------------------------------------------------------------------
/examples/spacex/components/PageNumbers.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import { useRouter, usePathname } from 'next/navigation'
4 |
5 | import { FragmentType, graphql, useFragment } from '@/fuse'
6 |
7 | import styles from './PageNumbers.module.css'
8 | import { sayHello } from './actions/sayHello'
9 |
10 | const TotalCountFields = graphql(`
11 | fragment TotalCountFields on QueryLaunchesList {
12 | totalCount
13 | }
14 | `)
15 |
16 | export const PageNumbers = (props: {
17 | list: FragmentType20 | {result.region} - {result.name} 21 |
22 |23 | Coordinates {result.longitude} {result.latitude} 24 |
25 |-
36 | {Array(amountOfPages)
37 | .fill(0)
38 | .map((_, i) => (
39 |
- 40 | 50 | 51 | ))} 52 |
SpaceX Launches
22 |-
52 | {result.data?.launches.nodes.map(
53 | (node) => node &&
- {node.name} , 54 | )} 55 |
{node.name}
22 | {node.launchDate && ( 23 |24 | Launched at {new Date(node.launchDate).toUTCString()} 25 |
26 | )} 27 | 28 |
26 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/examples/standalone/src/components/Location.tsx:
--------------------------------------------------------------------------------
1 | import { FragmentOf, graphql, readFragment } from '../fuse'
2 |
3 | export const SiteLocationFields = graphql(`
4 | fragment SiteLocationFields on Location {
5 | latitude
6 | longitude
7 | name
8 | region
9 | }
10 | `)
11 |
12 | export const Location = (props: {
13 | location: FragmentOf{result.name}
27 |Status: {result.status}
28 |{result.details}
29 | {result.location &&
19 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/examples/standalone/src/components/PageNumbers.module.css:
--------------------------------------------------------------------------------
1 | .list {
2 | display: flex;
3 | margin: 0;
4 | margin-top: 12px;
5 | list-style: none;
6 | }
7 |
8 | .pageNumber {
9 | background: none;
10 | color: inherit;
11 | border: none;
12 | padding: 0;
13 | font: inherit;
14 | cursor: pointer;
15 | outline: inherit;
16 | padding: 8px;
17 | }
18 |
19 | .active {
20 | text-decoration: underline;
21 | }
22 |
--------------------------------------------------------------------------------
/examples/standalone/src/components/PageNumbers.tsx:
--------------------------------------------------------------------------------
1 | import { FragmentType, graphql, useFragment } from '../fuse'
2 |
3 | import styles from './PageNumbers.module.css'
4 |
5 | export const TotalCountFields = graphql(`
6 | fragment TotalCountFields on QueryLaunchesList {
7 | totalCount
8 | }
9 | `)
10 |
11 | export const PageNumbers = (props: {
12 | list: FragmentType20 | {result.region} - {result.name} 21 |
22 |23 | Coordinates {result.longitude} {result.latitude} 24 |
25 |-
26 | {Array(amountOfPages)
27 | .fill(0)
28 | .map((_, i) => (
29 |
- 30 | 38 | 39 | ))} 40 |
Welcome {result.data?.user?.name}
40 | } 41 | ``` 42 | 43 | # [Docs](https://fusedata.dev/docs) 44 | 45 | **Read [the documentation](https://fusedata.dev/docs) for more information about using Fuse**. 46 | 47 | Quicklinks to some of the most-visited pages: 48 | 49 | - [Getting started](https://fusedata.dev/docs) 50 | - [Querying your API (client)](https://fusedata.dev/docs/client) 51 | - [Building your API (server)](https://fusedata.dev/docs/server/queries-and-mutations) 52 | - [Deploying your API (server)](https://fusedata.dev/docs/deployment) 53 | - [The Fuse Method](https://fusedata.dev/docs/fuse-method) 54 | 55 | # License 56 | 57 | Licensed under the MIT License, Copyright © 2023-present Stellate, Inc. 58 | 59 | See LICENSE for more information. 60 | -------------------------------------------------------------------------------- /packages/core/client.d.ts: -------------------------------------------------------------------------------- 1 | // src/next/client.ts 2 | import { 3 | useQuery, 4 | UrqlProvider, 5 | ClientOptions, 6 | SSRExchange, 7 | Client, 8 | } from '@urql/next' 9 | export * from 'urql' 10 | export { UrqlProvider as Provider, useQuery } 11 | 12 | type Optional
16 |
17 |
18 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/website/src/components/ExternalLink.tsx:
--------------------------------------------------------------------------------
1 | import { External } from '@/components/icons'
2 |
3 | type ExternalLinkProps = {
4 | href: string
5 | children: React.ReactNode
6 | }
7 |
8 | export function ExternalLink({ href, children }: ExternalLinkProps) {
9 | return (
10 |
16 | {children}
17 |
13 | {Array.from(Array(count)).map((_, i) => (
14 |
17 | )
18 | }
19 |
20 | function VerticalLine({ inverted }: { inverted?: boolean }) {
21 | return (
22 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/website/src/components/Section.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/utils/tailwind'
2 | import { ComponentProps } from 'react'
3 |
4 | type SectionProps = {
5 | variant?: 'light' | 'dark'
6 | } & ComponentProps<'div'>
7 |
8 | export function Section({
9 | variant = 'light',
10 | className,
11 | ...props
12 | }: SectionProps) {
13 | return (
14 |
30 |
35 | {
19 | if (!circleRef.current) {
20 | return
21 | }
22 | console.log(e)
23 | }}
24 | >
25 | 
30 |
31 | {/* */}
66 |
67 |
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/website/src/components/icons/ArrowConnectingNodes.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import type { SVGProps } from 'react'
3 | const SvgArrowConnectingNodes = (props: SVGProps
30 |
31 | {/* */}
66 |
23 | {/* Fully typesafe, component-level data fetching */}
24 | {blogPost.content}
27 |
28 | )
29 | }
30 | ```
31 |
--------------------------------------------------------------------------------
/website/src/components/snippets/node.mdx:
--------------------------------------------------------------------------------
1 | ```ts
2 | // /types/BlogPost.ts
3 |
4 | // Turn blog posts from your CMS into
5 | // a GraphQL object type & query
6 | export const BlogPostNode = node{blogPost.title}
26 |createAPIRouteHandler with createPagesRouteHandler instead.
45 |