replace @apollo/client with graphql-client

This commit is contained in:
Dawid Wysokiński 2021-03-20 15:00:42 +01:00
parent 4b94cfc868
commit 2d6e8d8baa
9 changed files with 43 additions and 200 deletions

View File

@ -9,7 +9,6 @@
"codegen": "graphql-codegen"
},
"dependencies": {
"@apollo/client": "^3.3.12",
"@kichiyaki/roboto": "^1.0.0",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
@ -17,6 +16,7 @@
"clsx": "^1.1.1",
"date-fns": "^2.19.0",
"graphql": "^15.5.0",
"graphql-request": "^3.4.0",
"lodash": "^4.17.21",
"next": "10.0.9",
"react": "17.0.1",

View File

@ -1,16 +1,9 @@
import '@kichiyaki/roboto';
import { useEffect, useMemo } from 'react';
import { AppProps } from 'next/app';
import { ApolloProvider } from '@apollo/client';
import ThemeProvider from 'libs/material-ui/ThemeProvider';
import { createClient, getApolloState } from 'libs/graphql';
function MyApp({ Component, pageProps }: AppProps) {
const apolloState = getApolloState(pageProps);
const client = useMemo(() => {
return createClient({ state: apolloState });
}, [apolloState]);
useEffect(() => {
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles && jssStyles.parentElement) {
@ -20,9 +13,7 @@ function MyApp({ Component, pageProps }: AppProps) {
return (
<ThemeProvider>
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
<Component {...pageProps} />
</ThemeProvider>
);
}

View File

@ -1 +1,2 @@
export { default } from 'features/IndexPage/IndexPage';
export { getStaticProps } from 'features/IndexPage/IndexPage';

View File

@ -1,5 +1,7 @@
import Layout from 'common/Layout/Layout';
import { GetStaticProps } from 'next';
import { createClient } from 'libs/graphql';
import Layout from 'common/Layout/Layout';
import Header from './components/Header/Header';
const IndexPage = () => {
@ -10,4 +12,14 @@ const IndexPage = () => {
);
};
export const getStaticProps: GetStaticProps = async context => {
const pageProps = {};
const client = createClient();
return {
props: pageProps,
revalidate: 60,
};
};
export default IndexPage;

View File

@ -1,27 +1,25 @@
import Image from 'next/image';
import { makeStyles } from '@material-ui/core/styles';
import { Container, Toolbar, Grid, Typography } from '@material-ui/core';
import {
Container,
Toolbar,
Grid,
Typography,
Divider,
} from '@material-ui/core';
const Header = () => {
const classes = useStyles();
return (
<header className={classes.header}>
<Toolbar />
<Divider />
<Container className={classes.container}>
<div>
<Toolbar />
<Grid container spacing={2} alignItems="center" wrap="wrap-reverse">
<Grid item md={5} xs={12} className={classes.imageWrapper}>
<Image
src="/images/checklist.png"
alt="zdamegzaminzawodowy.pl - dużo prostsza droga do zdania egzaminu zawodowego"
width={500}
height={500}
/>
</Grid>
<Grid container spacing={2} alignItems="center">
<Grid item md={7} xs={12}>
<Typography gutterBottom align="center" variant="h1">
<strong>Dużo</strong> prostsza droga do zdania egzaminu
zawodowego
<Typography gutterBottom variant="h1">
Prosta droga do zdania egzaminu zawodowego
</Typography>
<Typography variant="h5">
<strong>zdamegzaminzawodowy.pl</strong> to ogromna baza pytań z
@ -30,6 +28,14 @@ const Header = () => {
zacznij rozwiązywać testy!
</Typography>
</Grid>
<Grid item md={5} xs={12} className={classes.imageWrapper}>
<Image
src="/images/checklist.png"
alt="zdamegzaminzawodowy.pl - dużo prostsza droga do zdania egzaminu zawodowego"
width={700}
height={700}
/>
</Grid>
</Grid>
</div>
</Container>
@ -43,6 +49,7 @@ const useStyles = makeStyles(theme => ({
position: 'relative',
backgroundColor: theme.palette.primary.dark,
// backgroundImage: `linear-gradient(45deg, ${theme.palette.primary.light}, ${theme.palette.primary.dark})`,
overflowX: 'hidden',
},
container: {
display: 'flex',
@ -50,7 +57,7 @@ const useStyles = makeStyles(theme => ({
justifyContent: 'center',
paddingTop: theme.spacing(3),
paddingBottom: theme.spacing(3),
minHeight: '80vh',
minHeight: '75vh',
},
imageWrapper: {
textAlign: 'center',

View File

@ -1,13 +1,4 @@
import {
ApolloClient,
InMemoryCache,
NormalizedCacheObject,
ApolloLink,
HttpLink,
} from '@apollo/client';
import { onError } from '@apollo/client/link/error';
let client: ApolloClient<NormalizedCacheObject> | undefined;
import { GraphQLClient } from 'graphql-request';
const getApiURI = () => {
return (
@ -17,47 +8,6 @@ const getApiURI = () => {
);
};
export interface CreateClientOpts {
uri?: string;
state?: NormalizedCacheObject;
}
export const createClient = ({
uri = getApiURI(),
state,
}: CreateClientOpts = {}): ApolloClient<NormalizedCacheObject> => {
const ssrMode = typeof window === 'undefined';
if (!ssrMode && client) {
if (state) {
client.cache.restore(state);
}
return client;
}
const _client = new ApolloClient({
queryDeduplication: true,
cache: new InMemoryCache().restore(state ?? {}),
ssrMode,
link: ApolloLink.from([
onError(({ graphQLErrors, networkError }) => {
if (process.env.NODE_ENV === 'development') {
if (graphQLErrors) {
graphQLErrors.forEach(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
)
);
}
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
}
}),
new HttpLink({ uri }),
]),
});
if (ssrMode) return _client;
client = _client;
return client;
export const createClient = (uri = getApiURI()): GraphQLClient => {
return new GraphQLClient(uri);
};

View File

@ -1,3 +1,2 @@
export * from './createClient';
export * from './ssr';
export * from './types';

View File

@ -1,23 +0,0 @@
import { isPlainObject } from 'lodash';
import { ApolloClient, NormalizedCacheObject } from '@apollo/client';
const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';
export const addApolloState = (
client: ApolloClient<NormalizedCacheObject>,
pageProps: any
) => {
if (isPlainObject(pageProps)) {
pageProps[APOLLO_STATE_PROP_NAME] = client.cache.extract();
}
return pageProps;
};
export const getApolloState = (
pageProps: any
): NormalizedCacheObject | undefined => {
if (pageProps[APOLLO_STATE_PROP_NAME]) {
return pageProps[APOLLO_STATE_PROP_NAME];
}
return undefined;
};

View File

@ -2,25 +2,6 @@
# yarn lockfile v1
"@apollo/client@^3.3.12":
version "3.3.12"
resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.3.12.tgz#e723161617c479812ac425803a2b6a7c1b2466dd"
integrity sha512-1wLVqRpujzbLRWmFPnRCDK65xapOe2txY0sTI+BaqEbumMUVNS3vxojT6hRHf9ODFEK+F6MLrud2HGx0mB3eQw==
dependencies:
"@graphql-typed-document-node/core" "^3.0.0"
"@types/zen-observable" "^0.8.0"
"@wry/context" "^0.5.2"
"@wry/equality" "^0.3.0"
fast-json-stable-stringify "^2.0.0"
graphql-tag "^2.12.0"
hoist-non-react-statics "^3.3.2"
optimism "^0.14.0"
prop-types "^15.7.2"
symbol-observable "^2.0.0"
ts-invariant "^0.6.2"
tslib "^1.10.0"
zen-observable "^0.8.14"
"@ardatan/aggregate-error@0.0.6":
version "0.0.6"
resolved "https://registry.yarnpkg.com/@ardatan/aggregate-error/-/aggregate-error-0.0.6.tgz#fe6924771ea40fc98dc7a7045c2e872dc8527609"
@ -883,11 +864,6 @@
is-promise "4.0.0"
tslib "~2.0.1"
"@graphql-typed-document-node/core@^3.0.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.1.0.tgz#0eee6373e11418bfe0b5638f654df7a4ca6a3950"
integrity sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==
"@hapi/accept@5.0.1":
version "5.0.1"
resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.1.tgz#068553e867f0f63225a506ed74e899441af53e10"
@ -1164,11 +1140,6 @@
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==
"@types/ungap__global-this@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@types/ungap__global-this/-/ungap__global-this-0.3.1.tgz#18ce9f657da556037a29d50604335614ce703f4c"
integrity sha512-+/DsiV4CxXl6ZWefwHZDXSe1Slitz21tom38qPCaG0DYCS1NnDPIQDTKcmQ/tvK/edJUKkmuIDBJbmKDiB0r/g==
"@types/websocket@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@types/websocket/-/websocket-1.0.1.tgz#039272c196c2c0e4868a0d8a1a27bbb86e9e9138"
@ -1176,11 +1147,6 @@
dependencies:
"@types/node" "*"
"@types/zen-observable@^0.8.0":
version "0.8.2"
resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.8.2.tgz#808c9fa7e4517274ed555fa158f2de4b4f468e71"
integrity sha512-HrCIVMLjE1MOozVoD86622S7aunluLb2PJdPfb3nYiEtohm8mIB/vyv0Fd37AdeMFrTUQXEunw78YloMA3Qilg==
"@typescript-eslint/eslint-plugin@^4.0.0":
version "4.18.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.18.0.tgz#50fbce93211b5b690895d20ebec6fe8db48af1f6"
@ -1251,32 +1217,6 @@
"@typescript-eslint/types" "4.18.0"
eslint-visitor-keys "^2.0.0"
"@ungap/global-this@^0.4.2":
version "0.4.4"
resolved "https://registry.yarnpkg.com/@ungap/global-this/-/global-this-0.4.4.tgz#8a1b2cfcd3e26e079a847daba879308c924dd695"
integrity sha512-mHkm6FvepJECMNthFuIgpAEFmPOk71UyXuIxYfjytvFTnSDBIz7jmViO+LfHI/AjrazWije0PnSP3+/NlwzqtA==
"@wry/context@^0.5.2":
version "0.5.4"
resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.5.4.tgz#b6c28038872e0a0e1ff14eb40b5bf4cab2ab4e06"
integrity sha512-/pktJKHUXDr4D6TJqWgudOPJW2Z+Nb+bqk40jufA3uTkLbnCRKdJPiYDIa/c7mfcPH8Hr6O8zjCERpg5Sq04Zg==
dependencies:
tslib "^1.14.1"
"@wry/equality@^0.3.0":
version "0.3.4"
resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.3.4.tgz#37f101552b18a046d5c0c06da7b2021b15f72c03"
integrity sha512-1gQQhCPenzxw/1HzLlvSIs/59eBHJf9ZDIussjjZhqNSqQuPKQIzN6SWt4kemvlBPDi7RqMuUa03pId7MAE93g==
dependencies:
tslib "^1.14.1"
"@wry/trie@^0.2.1":
version "0.2.2"
resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.2.2.tgz#99f20f0fcbbcda17006069b155c826cbabfc402f"
integrity sha512-OxqBB39x6MfHaa2HpMiRMfhuUnQTddD32Ko020eBeJXq87ivX6xnSSnzKHVbA21p7iqBASz8n/07b6W5wW1BVQ==
dependencies:
tslib "^1.14.1"
acorn-jsx@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
@ -3083,7 +3023,7 @@ graphql-config@^3.2.0:
string-env-interpolation "1.0.1"
tslib "^2.0.0"
graphql-request@^3.3.0:
graphql-request@^3.3.0, graphql-request@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-3.4.0.tgz#3a400cd5511eb3c064b1873afb059196bbea9c2b"
integrity sha512-acrTzidSlwAj8wBNO7Q/UQHS8T+z5qRGquCQRv9J1InwR01BBWV9ObnoE+JS5nCCEj8wSGS0yrDXVDoRiKZuOg==
@ -3097,13 +3037,6 @@ graphql-tag@^2.11.0:
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.11.0.tgz#1deb53a01c46a7eb401d6cb59dec86fa1cccbffd"
integrity sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA==
graphql-tag@^2.12.0:
version "2.12.1"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.1.tgz#b065ef885e4800e4afd0842811b718a205f4aa58"
integrity sha512-LPewEE1vzGkHnCO8zdOGogKsHHBdtpGyihow1UuMwp6RnZa0lAS7NcbvltLOuo4pi5diQCPASAXZkQq44ffixA==
dependencies:
tslib "^1.14.1"
graphql-upload@^11.0.0:
version "11.0.0"
resolved "https://registry.yarnpkg.com/graphql-upload/-/graphql-upload-11.0.0.tgz#24b245ff18f353bab6715e8a055db9fd73035e10"
@ -4414,14 +4347,6 @@ onetime@^5.1.0:
dependencies:
mimic-fn "^2.1.0"
optimism@^0.14.0:
version "0.14.1"
resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.14.1.tgz#db35a0c770e16863f6c288f7cf58341a2348db44"
integrity sha512-7+1lSN+LJEtaj3uBLLFk8uFCFKy3txLvcvln5Dh1szXjF9yghEMeWclmnk0qdtYZ+lcMNyu48RmQQRw+LRYKSQ==
dependencies:
"@wry/context" "^0.5.2"
"@wry/trie" "^0.2.1"
optionator@^0.9.1:
version "0.9.1"
resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.1.tgz#4f236a6373dae0566a6d43e1326674f50c291499"
@ -5581,11 +5506,6 @@ symbol-observable@1.2.0, symbol-observable@^1.1.0:
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
symbol-observable@^2.0.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-2.0.3.tgz#5b521d3d07a43c351055fa43b8355b62d33fd16a"
integrity sha512-sQV7phh2WCYAn81oAkakC5qjq2Ml0g8ozqz03wOGnx9dDlG1de6yrF+0RAzSJD8fPUow3PTSMf2SAbOGxb93BA==
sync-fetch@0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/sync-fetch/-/sync-fetch-0.3.0.tgz#77246da949389310ad978ab26790bb05f88d1335"
@ -5674,15 +5594,6 @@ tr46@^1.0.1:
dependencies:
punycode "^2.1.0"
ts-invariant@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.6.2.tgz#2b95c0f25dd9da0c1d3b921e23ee5593133694d4"
integrity sha512-hsVurayufl1gXg8CHtgZkB7X0KtA3TrI3xcJ9xkRr8FeJHnM/TIEQkgBq9XkpduyBWWUdlRIR9xWf4Lxq3LJTg==
dependencies:
"@types/ungap__global-this" "^0.3.1"
"@ungap/global-this" "^0.4.2"
tslib "^1.9.3"
ts-log@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/ts-log/-/ts-log-2.2.3.tgz#4da5640fe25a9fb52642cd32391c886721318efb"
@ -5715,7 +5626,7 @@ tsconfig-paths@^3.9.0:
minimist "^1.2.0"
strip-bom "^3.0.0"
tslib@^1.10.0, tslib@^1.14.1, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@ -6072,8 +5983,3 @@ yocto-queue@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
zen-observable@^0.8.14:
version "0.8.15"
resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==