Skip to content

Commit 9a11174

Browse files
arantespparantespp
authored
feat: update to amplify v6 (#86)
* feat: update to amplify v6 * fix: amplify types * fix: credentials on client side
1 parent 8dd3b00 commit 9a11174

File tree

12 files changed

+1972
-4098
lines changed

12 files changed

+1972
-4098
lines changed

‎.ncurc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
reject: ['aws-amplify', 'typescript'],
2+
reject: ['next', 'typescript'],
33
};

‎apps/tereza/package.json

+11-10
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,31 @@
1313
"start": "next start"
1414
},
1515
"dependencies": {
16+
"@aws-amplify/adapter-nextjs": "^1.0.13",
1617
"@tereza-tech/components": "workspace:^",
1718
"@ttoss/forms": "^0.21.9",
18-
"@ttoss/react-auth": "^1.7.21",
19+
"@ttoss/react-auth": "^1.7.25",
1920
"@ttoss/react-i18n": "^1.25.8",
20-
"@ttoss/react-notifications": "^1.24.22",
21-
"@ttoss/relay-amplify": "^0.5.4",
21+
"@ttoss/react-notifications": "^1.24.24",
22+
"@ttoss/relay-amplify": "^0.5.5",
2223
"@ttoss/ui": "^4.0.7",
23-
"aws-amplify": "^5.3.10",
24-
"date-fns": "^3.0.6",
24+
"aws-amplify": "^6.0.13",
25+
"date-fns": "^3.3.1",
2526
"next": "14.0.4",
2627
"react": "^18.2.0",
2728
"react-dom": "^18.2.0",
2829
"react-error-boundary": "^4.0.12",
29-
"react-relay": "^16.1.0",
30+
"react-relay": "^16.2.0",
3031
"use-debounce": "^10.0.0"
3132
},
3233
"devDependencies": {
3334
"@ttoss/config": "^1.31.4",
3435
"@ttoss/i18n-cli": "^0.7.5",
35-
"@types/node": "^20.10.5",
36-
"@types/react": "^18.2.45",
36+
"@types/node": "^20.11.10",
37+
"@types/react": "^18.2.48",
3738
"@types/react-dom": "^18.2.18",
38-
"babel-plugin-relay": "^16.1.0",
39+
"babel-plugin-relay": "^16.2.0",
3940
"graphql": "^16.8.1",
40-
"relay-compiler": "^16.1.0"
41+
"relay-compiler": "^16.2.0"
4142
}
4243
}

‎apps/tereza/src/amplify/amplifyConfig.ts

+15-9
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
/* eslint-disable turbo/no-undeclared-env-vars */
2-
export const amplifyConfig = {
3-
aws_appsync_graphqlEndpoint: process.env.NEXT_PUBLIC_APPSYNC_GRAPHQL_ENDPOINT,
4-
aws_appsync_region: process.env.NEXT_PUBLIC_REGION,
5-
aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS',
2+
import { type ResourcesConfig } from 'aws-amplify';
3+
4+
export const amplifyConfig: ResourcesConfig = {
5+
API: {
6+
GraphQL: {
7+
endpoint: process.env.NEXT_PUBLIC_APPSYNC_GRAPHQL_ENDPOINT as string,
8+
region: process.env.NEXT_PUBLIC_REGION as string,
9+
defaultAuthMode: 'userPool',
10+
},
11+
},
612
Auth: {
7-
identityPoolId: process.env.NEXT_PUBLIC_IDENTITY_POOL_ID,
8-
region: process.env.NEXT_PUBLIC_REGION,
9-
userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID,
10-
userPoolWebClientId: process.env.NEXT_PUBLIC_APP_CLIENT_ID,
13+
Cognito: {
14+
identityPoolId: process.env.NEXT_PUBLIC_IDENTITY_POOL_ID as string,
15+
userPoolId: process.env.NEXT_PUBLIC_USER_POOL_ID as string,
16+
userPoolClientId: process.env.NEXT_PUBLIC_APP_CLIENT_ID as string,
17+
},
1118
},
12-
ssr: true,
1319
};

‎apps/tereza/src/amplify/amplifySSR.ts

+40-19
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,51 @@
1-
/**
2-
* https://docs.amplify.aws/javascript/prev/build-a-backend/server-side-rendering/#use-amplify-with-nextjs-app-router-app-directory
3-
*/
4-
import { Amplify, withSSRContext } from 'aws-amplify';
51
import { amplifyConfig } from './amplifyConfig';
2+
import { cookies } from 'next/headers';
3+
import { createServerRunner } from '@aws-amplify/adapter-nextjs';
64
import { encodeCredentials } from '@ttoss/relay-amplify';
7-
import { headers } from 'next/headers';
5+
import { fetchAuthSession } from 'aws-amplify/auth/server';
6+
import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';
87

9-
Amplify.configure(amplifyConfig);
8+
const cookieBasedClient = generateServerClientUsingCookies({
9+
config: amplifyConfig,
10+
cookies,
11+
});
1012

11-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
12-
export const fetchSSR = async (args: any) => {
13-
const req = {
14-
headers: {
15-
cookie: headers().get('cookie'),
16-
},
17-
};
18-
19-
const SSR = withSSRContext({ req });
13+
const { runWithAmplifyServerContext } = createServerRunner({
14+
config: amplifyConfig,
15+
});
2016

21-
const credentials = await SSR.Auth.currentCredentials();
17+
export const fetchSSR = async ({
18+
query,
19+
variables,
20+
}: {
21+
query: string | null;
22+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
23+
variables: any;
24+
}) => {
25+
const { credentials } = await runWithAmplifyServerContext({
26+
nextServerContext: { cookies },
27+
operation: (contextSpec) => {
28+
return fetchAuthSession(contextSpec);
29+
},
30+
});
2231

23-
const apiHeaders: { [key: string]: string } = {};
32+
const headers: { [key: string]: string } = {};
2433

2534
if (credentials) {
26-
apiHeaders['x-credentials'] = encodeCredentials(credentials);
35+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
36+
headers['x-credentials'] = encodeCredentials(credentials as any);
2737
}
2838

29-
return SSR.API.graphql(args, apiHeaders);
39+
if (!query) {
40+
throw new Error('Missing query');
41+
}
42+
43+
return cookieBasedClient.graphql(
44+
{
45+
query,
46+
variables,
47+
},
48+
headers
49+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
50+
) as any;
3051
};

‎apps/tereza/src/app/RootProviders.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const loadLocaleData: LoadLocaleData = async (locale) => {
1414
}
1515
};
1616

17-
Amplify.configure(amplifyConfig);
17+
Amplify.configure(amplifyConfig, { ssr: true });
1818

1919
export const RootProviders = ({ children }: { children: React.ReactNode }) => {
2020
return (

‎apps/tereza/src/relay/environment.ts

+45-4
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
import {
55
CacheConfig,
66
Environment,
7-
GraphQLResponse,
87
Network,
98
QueryResponseCache,
109
RecordSource,
1110
RequestParameters,
1211
Store,
1312
Variables,
1413
} from 'relay-runtime';
15-
import { fetchQuery } from '@ttoss/relay-amplify';
14+
import { encodeCredentials } from '@ttoss/relay-amplify';
15+
import { fetchAuthSession } from 'aws-amplify/auth';
16+
import { generateClient } from 'aws-amplify/api';
1617

1718
const CACHE_TTL = 5 * 1000; // 5 seconds, to resolve preloaded results
1819

20+
const client = generateClient();
21+
1922
export const responseCache: QueryResponseCache = new QueryResponseCache({
2023
size: 100,
2124
ttl: CACHE_TTL,
@@ -26,7 +29,6 @@ const createNetwork = () => {
2629
params: RequestParameters,
2730
variables: Variables,
2831
cacheConfig: CacheConfig
29-
// eslint-disable-next-line max-params
3032
) => {
3133
const isQuery = params.operationKind === 'query';
3234
const cacheKey = params.id ?? params.cacheID;
@@ -40,7 +42,46 @@ const createNetwork = () => {
4042
}
4143
}
4244

43-
return fetchQuery(params, variables, {}) as GraphQLResponse;
45+
let credentials: string | undefined;
46+
47+
try {
48+
const authSession = await fetchAuthSession();
49+
50+
if (
51+
authSession.credentials &&
52+
authSession.identityId &&
53+
authSession.credentials?.sessionToken
54+
) {
55+
credentials = encodeCredentials({
56+
accessKeyId: authSession.credentials?.accessKeyId,
57+
identityId: authSession.identityId,
58+
sessionToken: authSession.credentials?.sessionToken,
59+
secretAccessKey: authSession.credentials?.secretAccessKey,
60+
expiration: authSession.credentials?.expiration,
61+
authenticated: true,
62+
});
63+
}
64+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
65+
} catch (err: any) {
66+
// eslint-disable-next-line no-console
67+
console.error(err?.message);
68+
credentials = undefined;
69+
}
70+
71+
const headers: { [key: string]: string } = {};
72+
73+
if (credentials) {
74+
headers['x-credentials'] = credentials;
75+
}
76+
77+
return client.graphql(
78+
{
79+
query: params.text as string,
80+
variables,
81+
},
82+
headers
83+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
84+
) as any;
4485
};
4586

4687
const network = Network.create(fetchResponse);

‎apps/tereza/src/relay/loadSerializableQuery.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
VariablesOf,
77
} from 'relay-runtime';
88
import { fetchSSR } from 'src/amplify/amplifySSR';
9-
import { graphqlOperation } from 'aws-amplify';
109

1110
export interface SerializablePreloadedQuery<
1211
TRequest extends ConcreteRequest,
@@ -27,7 +26,7 @@ export const loadSerializableQuery = async <
2726
params: RequestParameters,
2827
variables: VariablesOf<TQuery>
2928
): Promise<SerializablePreloadedQuery<TRequest, TQuery>> => {
30-
const response = await fetchSSR(graphqlOperation(params.text, variables));
29+
const response = await fetchSSR({ query: params.text, variables });
3130

3231
return {
3332
params,

‎packages/components/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"@ttoss/react-icons": "^0.2.7",
4949
"@ttoss/test-utils": "^2.0.4",
5050
"@ttoss/ui": "^4.0.7",
51-
"@types/react": "^18.2.45",
51+
"@types/react": "^18.2.48",
5252
"jest": "^29.7.0",
5353
"react": "^18.2.0",
5454
"tsup": "^8.0.1"

‎packages/react-zettel/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
},
3333
"devDependencies": {
3434
"@ttoss/config": "^1.31.4",
35-
"@types/react": "^18.2.45",
35+
"@types/react": "^18.2.48",
3636
"react": "^18.2.0",
3737
"theme-ui": "^0.16.1",
3838
"tsup": "^8.0.1"

‎packages/theme/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"devDependencies": {
2929
"@ttoss/config": "^1.31.4",
3030
"@ttoss/ui": "^4.0.7",
31-
"@types/react": "^18.2.45",
31+
"@types/react": "^18.2.48",
3232
"react": "^18.2.0",
3333
"tsup": "^8.0.1"
3434
},

‎packages/zettel/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@
2020
},
2121
"typings": "dist/index.d.ts",
2222
"dependencies": {
23-
"@aws-sdk/client-s3": "^3.304.0",
23+
"@aws-sdk/client-s3": "^3.501.0",
2424
"@ttoss/config": "^1.31.4",
2525
"change-case": "^4.1.2",
26-
"date-fns": "^3.0.6",
26+
"date-fns": "^3.3.1",
2727
"gray-matter": "^4.0.3",
2828
"reading-time": "^1.5.0",
2929
"title-case": "^3.0.3"

0 commit comments

Comments
 (0)