packages: add apollo graphql client
This commit is contained in:
Chika
parent
d86af359d1
commit
b8ddce6f09
1
.env
1
.env
@ -3,3 +3,4 @@ USERS_SUPER=["akalinina","vchikalkin"]
|
||||
|
||||
####### URLS ########
|
||||
URL_GET_USER=http://auth_service/auth/user
|
||||
NEXT_PUBLIC_URL_CRM_GRAPHQL_PROXY=/api/crmgraphql
|
||||
@ -1,5 +1,4 @@
|
||||
####### Colors ########
|
||||
NEXT_PUBLIC_COLOR_PRIMARY=#BF3676
|
||||
NEXT_PUBLIC_COLOR_SECONDARY=#FD4047
|
||||
NEXT_PUBLIC_COLOR_TERTIARTY=#FF9112
|
||||
|
||||
NEXT_PUBLIC_COLOR_TERTIARTY=#FF9112
|
||||
2
.graphqlrc.yml
Normal file
2
.graphqlrc.yml
Normal file
@ -0,0 +1,2 @@
|
||||
schema: './services/crm/graphql/schema.graphql'
|
||||
documents: '**/*.{graphql,js,ts,jsx,tsx}'
|
||||
6
@types/graphql.d.ts
vendored
Normal file
6
@types/graphql.d.ts
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
declare module '*.graphql' {
|
||||
import { DocumentNode } from 'graphql';
|
||||
const Schema: DocumentNode;
|
||||
|
||||
export = Schema;
|
||||
}
|
||||
10
apollo.config.js
Normal file
10
apollo.config.js
Normal file
@ -0,0 +1,10 @@
|
||||
/** @type {import('apollo').ApolloConfig} */
|
||||
module.exports = {
|
||||
client: {
|
||||
service: {
|
||||
name: 'crmgraphql',
|
||||
localSchemaFile: './services/crm/graphql/schema.graphql',
|
||||
},
|
||||
excludes: ['services/crm/graphql/schema.graphql'],
|
||||
},
|
||||
};
|
||||
@ -1,5 +1,6 @@
|
||||
const withPlugins = require('next-compose-plugins');
|
||||
const withLess = require('next-with-less');
|
||||
const withGraphQL = require('next-plugin-graphql');
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
@ -7,6 +8,14 @@ const nextConfig = {
|
||||
compiler: {
|
||||
styledComponents: true,
|
||||
},
|
||||
async rewrites() {
|
||||
return [
|
||||
{
|
||||
source: process.env.NEXT_PUBLIC_URL_CRM_GRAPHQL_PROXY,
|
||||
destination: process.env.URL_CRM_GRAPHQL_DIRECT,
|
||||
},
|
||||
];
|
||||
},
|
||||
};
|
||||
|
||||
const plugins = [
|
||||
@ -22,6 +31,7 @@ const plugins = [
|
||||
},
|
||||
},
|
||||
],
|
||||
[withGraphQL],
|
||||
];
|
||||
|
||||
module.exports = withPlugins(plugins, nextConfig);
|
||||
|
||||
10
package.json
10
package.json
@ -6,17 +6,22 @@
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
"lint": "next lint",
|
||||
"graphql:codegen": "apollo client:codegen --target typescript",
|
||||
"graphql:schema": "apollo client:download-schema services/crm/graphql/schema.graphql"
|
||||
},
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.6.0",
|
||||
"antd": "^4.19.5",
|
||||
"axios": "^0.26.1",
|
||||
"graphql": "14.0.2 - 14.2.0 || ^14.3.1 || ^15.0.0",
|
||||
"less": "^4.1.2",
|
||||
"less-loader": "^10.2.0",
|
||||
"mobx": "^6.5.0",
|
||||
"mobx-react-lite": "^3.3.0",
|
||||
"next": "12.1.5",
|
||||
"next-compose-plugins": "^2.2.1",
|
||||
"next-plugin-graphql": "^0.0.2",
|
||||
"next-with-less": "^2.0.5",
|
||||
"react": "18.0.0",
|
||||
"react-dom": "18.0.0",
|
||||
@ -30,6 +35,7 @@
|
||||
"@types/react-dom": "18.0.1",
|
||||
"@types/rebass": "^4.0.10",
|
||||
"@types/styled-components": "^5.1.25",
|
||||
"apollo": "^2.33.10",
|
||||
"eslint": "8.13.0",
|
||||
"eslint-config-next": "12.1.5",
|
||||
"msw": "^0.39.2",
|
||||
@ -38,4 +44,4 @@
|
||||
"msw": {
|
||||
"workerDirectory": "public"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { ApolloProvider } from '@apollo/client';
|
||||
import 'antd/dist/antd.less';
|
||||
import Layout from 'Components/Layout';
|
||||
import type { AppProps } from 'next/app';
|
||||
import Head from 'next/head';
|
||||
import { useApollo } from 'services/crm/graphql/client';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
import { GlobalStyle } from 'UIKit/colors';
|
||||
import theme from 'UIKit/theme';
|
||||
@ -13,6 +15,8 @@ if (process.env.NODE_ENV === 'development') {
|
||||
}
|
||||
|
||||
function App({ Component, pageProps }: AppProps) {
|
||||
const apolloClient = useApollo(pageProps.initialApolloState);
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Head>
|
||||
@ -24,7 +28,9 @@ function App({ Component, pageProps }: AppProps) {
|
||||
<GlobalStyle />
|
||||
<StoreProvider {...pageProps}>
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
<ApolloProvider client={apolloClient}>
|
||||
<Component {...pageProps} />
|
||||
</ApolloProvider>
|
||||
</Layout>
|
||||
</StoreProvider>
|
||||
</ThemeProvider>
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import { NormalizedCacheObject } from '@apollo/client';
|
||||
import type { GetServerSideProps, NextPage } from 'next';
|
||||
import { initializeApollo } from 'services/crm/graphql/client';
|
||||
import { fetchUser } from 'services/user';
|
||||
import type { User } from 'services/user/types';
|
||||
|
||||
interface PageProps {
|
||||
user: User;
|
||||
initialApolloState: NormalizedCacheObject;
|
||||
}
|
||||
|
||||
const Home: NextPage<PageProps> = () => {
|
||||
@ -17,7 +20,9 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async ctx => {
|
||||
: undefined,
|
||||
});
|
||||
|
||||
return { props: { user } };
|
||||
const apolloClient = initializeApollo();
|
||||
|
||||
return { props: { user, initialApolloState: apolloClient.cache.extract() } };
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
39
services/crm/graphql/client.js
Normal file
39
services/crm/graphql/client.js
Normal file
@ -0,0 +1,39 @@
|
||||
import { ApolloClient, InMemoryCache } from '@apollo/client';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
/** @type {import('@apollo/client').ApolloClient<NormalizedCacheObject>} */
|
||||
let apolloClient;
|
||||
|
||||
const uri =
|
||||
typeof window === 'undefined'
|
||||
? process.env.URL_CRM_GRAPHQL_DIRECT
|
||||
: process.env.NEXT_PUBLIC_URL_CRM_GRAPHQL_PROXY;
|
||||
|
||||
function createApolloClient() {
|
||||
return new ApolloClient({
|
||||
ssrMode: typeof window === 'undefined',
|
||||
uri,
|
||||
cache: new InMemoryCache(),
|
||||
});
|
||||
}
|
||||
|
||||
export function initializeApollo(initialState = null) {
|
||||
const _apolloClient = apolloClient ?? createApolloClient();
|
||||
|
||||
// If your page has Next.js data fetching methods that use Apollo Client, the initial state
|
||||
// gets hydrated here
|
||||
if (initialState) {
|
||||
_apolloClient.cache.restore(initialState);
|
||||
}
|
||||
// For SSG and SSR always create a new Apollo Client
|
||||
if (typeof window === 'undefined') return _apolloClient;
|
||||
// Create the Apollo Client once in the client
|
||||
if (!apolloClient) apolloClient = _apolloClient;
|
||||
|
||||
return _apolloClient;
|
||||
}
|
||||
|
||||
export function useApollo(initialState) {
|
||||
const client = useMemo(() => initializeApollo(initialState), [initialState]);
|
||||
return client;
|
||||
}
|
||||
2488
services/crm/graphql/schema.graphql
Normal file
2488
services/crm/graphql/schema.graphql
Normal file
File diff suppressed because it is too large
Load Diff
@ -14,8 +14,10 @@
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
"incremental": true,
|
||||
"typeRoots": ["node_modules/@types", "@types"]
|
||||
},
|
||||
"files": ["@types/graphql.d.ts"],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user