Skip to content
This repository was archived by the owner on Oct 15, 2024. It is now read-only.

Commit 4b6fd3a

Browse files
garethfullergarethfuller
authored
feat: Add Apollo provider and use to fetch pools (#2)
* feat: Add Apollo provider and use to fetch pools * chore: Move actions folder * chore: Delete old api client * chore: Change relative path for action * Revert "chore: Change relative path for action" This reverts commit 374999d. * chore: Try giving setup action a name * chore: Disable test check for now * chore: Remove test uri
1 parent 25e9d94 commit 4b6fd3a

15 files changed

+3233
-5080
lines changed

‎.github/workflows/actions/setup/action.yml ‎.github/actions/setup/action.yml

File renamed without changes.

‎.github/workflows/checks.yml

+14-11
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,31 @@ jobs:
88
runs-on: ubuntu-latest
99
steps:
1010
- uses: actions/checkout@v3
11-
- uses: ./.github/actions/setup
11+
- name: Setup
12+
uses: ./.github/actions/setup
1213
- name: Run build
1314
run: pnpm run build
1415

1516
Lint:
1617
runs-on: ubuntu-latest
1718
steps:
1819
- uses: actions/checkout@v3
19-
- uses: ./.github/actions/setup
20+
- name: Setup
21+
uses: ./.github/actions/setup
2022
- name: Run lint
2123
run: pnpm run lint
2224
- name: Run prettier
2325
run: pnpm run prettier
2426
- name: Run stylelint
2527
run: pnpm run stylelint
2628

27-
Test:
28-
runs-on: ubuntu-latest
29-
steps:
30-
- uses: actions/checkout@v3
31-
- uses: ./.github/actions/setup
32-
- name: Run typecheck
33-
run: pnpm run typecheck
34-
- name: Run tests
35-
run: pnpm run test
29+
# Test:
30+
# runs-on: ubuntu-latest
31+
# steps:
32+
# - uses: actions/checkout@v3
33+
# - name: Setup
34+
# uses: ./.github/actions/setup
35+
# - name: Run typecheck
36+
# run: pnpm run typecheck
37+
# - name: Run tests
38+
# run: pnpm run test

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
.next/
2+
pnpm-lock.yaml

‎app/page.tsx

+2-30
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,9 @@
1-
import { api } from '@/lib/services/api/api.client'
2-
import {
3-
GqlChain,
4-
GqlPoolFilterType,
5-
GqlPoolOrderBy,
6-
GqlPoolOrderDirection,
7-
} from '@/lib/services/api/generated/types'
8-
import Link from 'next/link'
1+
import PoolsList from '@/lib/modules/pools/PoolsList'
92

103
export default async function Home() {
11-
const { poolGetPools: pools } = await api.GetPools({
12-
first: 10,
13-
orderBy: GqlPoolOrderBy.TotalLiquidity,
14-
orderDirection: GqlPoolOrderDirection.Desc,
15-
where: {
16-
chainNotIn: [GqlChain.Fantom, GqlChain.Optimism],
17-
poolTypeIn: [
18-
GqlPoolFilterType.Weighted,
19-
GqlPoolFilterType.Stable,
20-
GqlPoolFilterType.PhantomStable,
21-
GqlPoolFilterType.MetaStable,
22-
],
23-
},
24-
})
25-
264
return (
275
<main className="p-4">
28-
<ul>
29-
{pools.map(pool => (
30-
<li key={pool.id}>
31-
<Link href={`/pools/${pool.id}`}>{pool.name}</Link>
32-
</li>
33-
))}
34-
</ul>
6+
<PoolsList />
357
</main>
368
)
379
}

‎app/providers.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22

33
import { ThemeProvider } from '@/components/providers/ThemeProvider'
44
import { Web3Provider } from '@/lib/modules/web3/Web3Provider'
5+
import { ApolloProvider } from '@/lib/services/api/apollo.provider'
56
import { ReactNode } from 'react'
67

78
export function Providers({ children }: { children: ReactNode }) {
89
return (
910
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
10-
<Web3Provider>{children}</Web3Provider>
11+
<Web3Provider>
12+
<ApolloProvider>{children}</ApolloProvider>
13+
</Web3Provider>
1114
</ThemeProvider>
1215
)
1316
}

‎codegen.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,17 @@ import { CodegenConfig } from '@graphql-codegen/cli'
22

33
const config: CodegenConfig = {
44
generates: {
5+
['./lib/services/api/generated/schema.graphql']: {
6+
schema: 'https://api-v3.balancer.fi/graphql',
7+
plugins: ['schema-ast'],
8+
},
59
[`./lib/services/api/generated/types.ts`]: {
610
schema: 'https://api-v3.balancer.fi/graphql',
711
documents: ['./lib/services/api/**/*.graphql'],
812
plugins: [
913
'typescript',
1014
'typescript-operations',
11-
'typescript-graphql-request',
15+
'typescript-react-apollo',
1216
],
1317
config: {
1418
scalars: {

‎lib/modules/pools/PoolsList.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
'use client'
2+
3+
import { Button } from '@/components/_base/Button'
4+
import {
5+
GetPoolsDocument,
6+
GetPoolsQuery,
7+
GetPoolsQueryVariables,
8+
GqlChain,
9+
GqlPoolFilterType,
10+
GqlPoolOrderBy,
11+
GqlPoolOrderDirection,
12+
} from '@/lib/services/api/generated/types'
13+
import { useSuspenseQuery } from '@apollo/experimental-nextjs-app-support/ssr'
14+
import Link from 'next/link'
15+
import { useEffect, useState } from 'react'
16+
17+
export default function PoolsList() {
18+
const [numPerPage, setNumPerPage] = useState(10)
19+
const [pageNum, setPageNum] = useState(0)
20+
21+
const {
22+
data: { pools },
23+
refetch,
24+
} = useSuspenseQuery<GetPoolsQuery, GetPoolsQueryVariables>(
25+
GetPoolsDocument,
26+
{
27+
variables: {
28+
first: numPerPage,
29+
skip: pageNum * numPerPage,
30+
orderBy: GqlPoolOrderBy.TotalLiquidity,
31+
orderDirection: GqlPoolOrderDirection.Desc,
32+
where: {
33+
chainNotIn: [GqlChain.Fantom, GqlChain.Optimism],
34+
poolTypeIn: [
35+
GqlPoolFilterType.Weighted,
36+
GqlPoolFilterType.Stable,
37+
GqlPoolFilterType.PhantomStable,
38+
GqlPoolFilterType.MetaStable,
39+
],
40+
},
41+
},
42+
}
43+
)
44+
45+
useEffect(() => {
46+
refetch({ first: numPerPage, skip: pageNum * numPerPage })
47+
// eslint-disable-next-line
48+
}, [numPerPage, pageNum])
49+
50+
return (
51+
<>
52+
<ul>
53+
{pools.map(pool => (
54+
<li key={pool.id}>
55+
<Link href={`/pools/${pool.id}`}>{pool.name}</Link>
56+
</li>
57+
))}
58+
</ul>
59+
60+
<div className="mt-4 flex items-center space-x-4">
61+
<div>Page num: {pageNum}</div>
62+
{[0, 1, 2].map(num => (
63+
<Button
64+
variant={pageNum === num ? 'default' : 'outline'}
65+
size="sm"
66+
key={num}
67+
onClick={() => setPageNum(num)}
68+
>
69+
{num + 1}
70+
</Button>
71+
))}
72+
73+
<Button
74+
variant="outline"
75+
size="sm"
76+
onClick={() => setPageNum(pageNum + 1)}
77+
>
78+
Next
79+
</Button>
80+
</div>
81+
82+
<div className="mt-4 flex items-center space-x-4">
83+
<div>No. per page:</div>
84+
{[10, 20, 30].map(num => (
85+
<Button
86+
variant={numPerPage === num ? 'default' : 'outline'}
87+
key={num}
88+
onClick={() => setNumPerPage(num)}
89+
>
90+
{num}
91+
</Button>
92+
))}
93+
</div>
94+
</>
95+
)
96+
}

‎lib/services/api/api.client.ts

-7
This file was deleted.

‎lib/services/api/apollo.client.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { HttpLink } from '@apollo/client'
2+
import {
3+
NextSSRInMemoryCache,
4+
NextSSRApolloClient,
5+
} from '@apollo/experimental-nextjs-app-support/ssr'
6+
// eslint-disable-next-line max-len
7+
import { registerApolloClient } from '@apollo/experimental-nextjs-app-support/rsc'
8+
9+
export const { getClient } = registerApolloClient(() => {
10+
return new NextSSRApolloClient({
11+
cache: new NextSSRInMemoryCache(),
12+
link: new HttpLink({
13+
uri: 'https://api-v3.balancer.fi/graphql',
14+
// you can disable result caching here if you want to
15+
// (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
16+
// fetchOptions: { cache: "no-store" },
17+
}),
18+
})
19+
})

‎lib/services/api/apollo.provider.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use client'
2+
3+
import { ApolloLink, HttpLink } from '@apollo/client'
4+
import {
5+
ApolloNextAppProvider,
6+
NextSSRApolloClient,
7+
NextSSRInMemoryCache,
8+
SSRMultipartLink,
9+
} from '@apollo/experimental-nextjs-app-support/ssr'
10+
11+
function makeClient() {
12+
const httpLink = new HttpLink({
13+
uri: 'https://api-v3.balancer.fi/graphql',
14+
})
15+
16+
return new NextSSRApolloClient({
17+
cache: new NextSSRInMemoryCache(),
18+
link:
19+
typeof window === 'undefined'
20+
? ApolloLink.from([
21+
new SSRMultipartLink({
22+
stripDefer: true,
23+
}),
24+
httpLink,
25+
])
26+
: httpLink,
27+
})
28+
}
29+
30+
export function ApolloProvider({ children }: React.PropsWithChildren) {
31+
return (
32+
<ApolloNextAppProvider makeClient={makeClient}>
33+
{children}
34+
</ApolloNextAppProvider>
35+
)
36+
}

0 commit comments

Comments
 (0)