(Home, query);
41 |
--------------------------------------------------------------------------------
/src/relay/environment.ts:
--------------------------------------------------------------------------------
1 | import { Store, RecordSource, Environment } from 'relay-runtime';
2 | import { RecordMap } from 'relay-runtime/lib/store/RelayStoreTypes';
3 | import { RelayNetworkLayer, urlMiddleware } from 'react-relay-network-modern';
4 |
5 | const network = new RelayNetworkLayer([
6 | urlMiddleware({
7 | url: process.env.NEXT_GRAPHQL_URL as string,
8 | }),
9 | ]);
10 |
11 | const initEnvironment = (records?: RecordMap) => {
12 | return new Environment({
13 | network,
14 | store: new Store(new RecordSource(records)),
15 | });
16 | };
17 |
18 | export default initEnvironment;
19 |
--------------------------------------------------------------------------------
/src/relay/withQuery.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { OperationType } from 'relay-runtime';
3 | import { RelayEnvironmentProvider } from 'react-relay/hooks';
4 | import { NextPage } from 'next';
5 | import environment from './environment';
6 | import { RecordMap } from 'relay-runtime/lib/store/RelayStoreTypes';
7 | import { GraphQLTaggedNode } from 'relay-runtime';
8 | import { fetchQuery } from 'react-relay';
9 | import { CacheConfig } from 'relay-runtime/lib/util/RelayRuntimeTypes';
10 | import { useQuery } from 'relay-hooks/lib';
11 |
12 | type Props = { records: RecordMap } & P;
13 |
14 | type BaseComponentProps = {
15 | query: OperationType['response'];
16 | };
17 |
18 | function withQuery
(
19 | Component: React.ComponentType
,
20 | query: GraphQLTaggedNode,
21 | variables?: Q['variables']
22 | ): React.FC> {
23 | const WithRelayEnvironment: React.FC = () => {
24 | const { props: queryResponse, error } = useQuery(query, variables, {
25 | fetchPolicy: 'store-only',
26 | });
27 | if (error) return An Error Occurred
;
28 | if (!queryResponse) return Loading
;
29 | // @ts-ignore
30 | return ;
31 | };
32 |
33 | const WithQuery: NextPage> = ({ records, ...props }) => {
34 | return (
35 |
36 |
37 |
38 | );
39 | };
40 | return WithQuery;
41 | }
42 |
43 | export function getRelayStaticProps(
44 | query: GraphQLTaggedNode,
45 | variables: T['variables'] = {},
46 | cacheConfig?: CacheConfig | null
47 | ) {
48 | return async () => {
49 | const env = environment();
50 | await fetchQuery(env, query, variables, cacheConfig);
51 |
52 | return {
53 | props: {
54 | records: env.getStore().getSource().toJSON(),
55 | },
56 | };
57 | };
58 | }
59 | export default withQuery;
60 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "alwaysStrict": true,
5 | "esModuleInterop": true,
6 | "forceConsistentCasingInFileNames": true,
7 | "isolatedModules": true,
8 | "jsx": "preserve",
9 | "lib": ["dom", "es2017"],
10 | "module": "commonjs",
11 | "moduleResolution": "node",
12 | "noEmit": true,
13 | "noFallthroughCasesInSwitch": true,
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "resolveJsonModule": true,
17 | "skipLibCheck": true,
18 | "strict": true,
19 | "target": "esnext"
20 | },
21 | "exclude": ["node_modules"],
22 | "include": ["**/*.ts", "**/*.tsx"]
23 | }
24 |
--------------------------------------------------------------------------------