web: start using graphql-codegen, switch to urql, use graphql data a few places
This commit is contained in:
@ -1,64 +1,50 @@
|
||||
import { gql } from "@apollo/client";
|
||||
import { graphql } from "@/gql";
|
||||
import { EventFragment } from "@/gql/graphql";
|
||||
import { getClient } from "@/app/client";
|
||||
import { Blocks } from "@/components/blocks/Blocks";
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const query = gql(`
|
||||
{
|
||||
pages(contentType: "events.EventPage") {
|
||||
id
|
||||
slug
|
||||
const allEventSlugsQuery = graphql(`
|
||||
query allEventSlugs {
|
||||
pages(contentType: "events.EventPage") {
|
||||
id
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
const { data } = await getClient().query({
|
||||
query: query,
|
||||
});
|
||||
`);
|
||||
const { data } = await getClient().query(allEventSlugsQuery);
|
||||
|
||||
return data.pages.map((page: any) => ({
|
||||
return data?.pages.map((page: any) => ({
|
||||
slug: page.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export default async function Page({ params }: { params: { slug: string } }) {
|
||||
const query = gql(`
|
||||
query ($slug: String!) {
|
||||
event: page(contentType: "events.EventPage", slug: $slug) {
|
||||
id
|
||||
slug
|
||||
title
|
||||
... on EventPage {
|
||||
body {
|
||||
id
|
||||
blockType
|
||||
const eventBySlugQuery = graphql(`
|
||||
query eventBySlug($slug: String!) {
|
||||
event: page(contentType: "events.EventPage", slug: $slug) {
|
||||
... on EventPage {
|
||||
...Event
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
`);
|
||||
|
||||
// const response = await getClient()
|
||||
// .query({
|
||||
// query: query,
|
||||
// variables: { slug: params.slug },
|
||||
// })
|
||||
// .then()
|
||||
// .catch((e) => console.error(e.networkError.result.errors));
|
||||
|
||||
const { data } = await getClient().query({
|
||||
query: query,
|
||||
variables: { slug: params.slug },
|
||||
const { data } = await getClient().query(eventBySlugQuery, {
|
||||
slug: params.slug,
|
||||
});
|
||||
|
||||
const { event } = data;
|
||||
const event = (data?.event ?? {}) as EventFragment;
|
||||
|
||||
console.log("event", event);
|
||||
|
||||
return (
|
||||
<main className="site-main" id="main">
|
||||
<section className="page-header">
|
||||
<h1>Et enkeltarrangement</h1>
|
||||
<p>!!</p>
|
||||
<h1>{event.title}</h1>
|
||||
</section>
|
||||
<section className="page-content">
|
||||
<div key={event.id}>{event.title}</div>
|
||||
<Blocks blocks={event.body} />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
@ -1,41 +1,53 @@
|
||||
import { gql } from "@apollo/client";
|
||||
import { graphql } from "@/gql";
|
||||
import { EventFragment } from "@/gql/graphql";
|
||||
import { getClient } from "@/app/client";
|
||||
import { EventList } from "@/components/events/EventList";
|
||||
|
||||
const EventFragmentDefinition = graphql(`
|
||||
fragment Event on EventPage {
|
||||
__typename
|
||||
id
|
||||
slug
|
||||
title
|
||||
body {
|
||||
id
|
||||
blockType
|
||||
field
|
||||
... on RichTextBlock {
|
||||
rawValue
|
||||
value
|
||||
}
|
||||
}
|
||||
featuredImage {
|
||||
src
|
||||
}
|
||||
facebookUrl
|
||||
ticketUrl
|
||||
priceRegular
|
||||
priceMember
|
||||
priceRegular
|
||||
}
|
||||
`);
|
||||
|
||||
export default async function Page() {
|
||||
const query = gql(`
|
||||
{
|
||||
pages(contentType: "events.EventPage") {
|
||||
id
|
||||
slug
|
||||
title
|
||||
... on EventPage {
|
||||
body {
|
||||
id
|
||||
blockType
|
||||
}
|
||||
}
|
||||
const allEventsQuery = graphql(`
|
||||
query allEvents {
|
||||
events: pages(contentType: "events.EventPage") {
|
||||
... on EventPage {
|
||||
...Event
|
||||
}
|
||||
}
|
||||
`);
|
||||
const { data } = await getClient().query({
|
||||
query: query,
|
||||
});
|
||||
}
|
||||
`);
|
||||
const { data, error } = await getClient().query(allEventsQuery, {});
|
||||
const events = (data?.events ?? []) as EventFragment[]
|
||||
|
||||
return (
|
||||
<main className="site-main" id="main">
|
||||
<section className="page-header">
|
||||
<h1>Arrangementer</h1>
|
||||
<p>woo</p>
|
||||
</section>
|
||||
{data.pages && (
|
||||
<section className="page-content">
|
||||
{data.pages.map((event) => (
|
||||
<div key={event.id}>{event.title}</div>
|
||||
))}
|
||||
</section>
|
||||
)}
|
||||
<EventList />
|
||||
<EventList events={events} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
|
||||
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
|
||||
import { cacheExchange, createClient, fetchExchange } from "@urql/core";
|
||||
import { registerUrql } from "@urql/next/rsc";
|
||||
|
||||
export const { getClient } = registerApolloClient(() => {
|
||||
return new ApolloClient({
|
||||
cache: new InMemoryCache(),
|
||||
link: new HttpLink({
|
||||
uri: "https://cms.neuf.kult.444.no/api/graphql/",
|
||||
}),
|
||||
const makeClient = () => {
|
||||
return createClient({
|
||||
url: process.env.GRAPHQL_ENDPOINT ?? "",
|
||||
exchanges: [cacheExchange, fetchExchange],
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const { getClient } = registerUrql(makeClient);
|
||||
|
||||
@ -1,12 +1,25 @@
|
||||
import { graphql } from "@/gql";
|
||||
import {EventFragment} from "@/gql/graphql"
|
||||
import { getClient } from "@/app/client";
|
||||
import { EventList } from "@/components/events/EventList";
|
||||
import { Body } from "@/components/general/Body";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
export default async function Home() {
|
||||
const homeQuery = graphql(`
|
||||
query home {
|
||||
events: pages(contentType: "events.EventPage") {
|
||||
...Event
|
||||
}
|
||||
}
|
||||
`);
|
||||
const { data, error } = await getClient().query(homeQuery, {});
|
||||
const events = (data?.events ?? []) as EventFragment[]
|
||||
|
||||
return (
|
||||
<main className="site-main" id="main">
|
||||
<div>
|
||||
<EventList />
|
||||
<EventList events={events} />
|
||||
<blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
|
||||
<p className="lead">
|
||||
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
|
||||
|
||||
49
web/src/components/blocks/Blocks.tsx
Normal file
49
web/src/components/blocks/Blocks.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
export const RichTextBlock = ({ block }: any) => {
|
||||
return (
|
||||
<div
|
||||
className="rich-text-block"
|
||||
dangerouslySetInnerHTML={{ __html: block.value }}
|
||||
></div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Blocks = ({ blocks }: any) => {
|
||||
return blocks.map((block: any) => {
|
||||
switch (block.blockType) {
|
||||
case "RichTextBlock":
|
||||
return <RichTextBlock block={block} />;
|
||||
break;
|
||||
default:
|
||||
return <div>Unsupported block type {block.blockType}</div>;
|
||||
console.log("unsupported block", block);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
StreamFieldBlock
|
||||
CharBlock
|
||||
TextBlock
|
||||
EmailBlock
|
||||
IntegerBlock
|
||||
FloatBlock
|
||||
DecimalBlock
|
||||
RegexBlock
|
||||
URLBlock
|
||||
BooleanBlock
|
||||
DateBlock
|
||||
TimeBlock
|
||||
DateTimeBlock
|
||||
RichTextBlock
|
||||
RawHTMLBlock
|
||||
BlockQuoteBlock
|
||||
ChoiceBlock
|
||||
StreamBlock
|
||||
StructBlock
|
||||
StaticBlock
|
||||
ListBlock
|
||||
EmbedBlock
|
||||
PageChooserBlock
|
||||
DocumentChooserBlock
|
||||
ImageChooserBlock
|
||||
*/
|
||||
@ -1,13 +1,17 @@
|
||||
import { EventFragment } from "@/gql/graphql";
|
||||
import styles from "./eventItem.module.scss";
|
||||
import Link from "next/link";
|
||||
|
||||
export const EventItem = () => {
|
||||
export const EventItem = ({ event }: { event: EventFragment }) => {
|
||||
return (
|
||||
<li className={`${styles.eventItem} linkItem`}>
|
||||
<div className={styles.image}></div>
|
||||
<div className={styles.text}>
|
||||
<h1 className={styles.title}>Arrangementstittel</h1>
|
||||
<p className={styles.details}>Detaljer og tidspunkt</p>
|
||||
</div>
|
||||
</li>
|
||||
<Link href={`/arrangementer/${event.slug}`}>
|
||||
<li className={`${styles.eventItem} linkItem`}>
|
||||
<div className={styles.image}></div>
|
||||
<div className={styles.text}>
|
||||
<h1 className={styles.title}>{event.title}</h1>
|
||||
<p className={styles.details}>Detaljer og tidspunkt</p>
|
||||
</div>
|
||||
</li>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { EventFragment } from "@/gql/graphql";
|
||||
import { EventItem } from "./EventItem";
|
||||
import styles from "./eventList.module.scss";
|
||||
|
||||
export const EventList = () => {
|
||||
export const EventList = ({ events }: { events: EventFragment[] }) => {
|
||||
return (
|
||||
<ul className={styles.eventList}>
|
||||
<EventItem />
|
||||
<EventItem />
|
||||
<EventItem />
|
||||
<EventItem />
|
||||
{events.map((event) => (
|
||||
<EventItem key={event.id} event={event} />
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
67
web/src/gql/fragment-masking.ts
Normal file
67
web/src/gql/fragment-masking.ts
Normal file
@ -0,0 +1,67 @@
|
||||
/* eslint-disable */
|
||||
import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
|
||||
import { FragmentDefinitionNode } from 'graphql';
|
||||
import { Incremental } from './graphql';
|
||||
|
||||
|
||||
export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
|
||||
infer TType,
|
||||
any
|
||||
>
|
||||
? [TType] extends [{ ' $fragmentName'?: infer TKey }]
|
||||
? TKey extends string
|
||||
? { ' $fragmentRefs'?: { [key in TKey]: TType } }
|
||||
: never
|
||||
: never
|
||||
: never;
|
||||
|
||||
// return non-nullable if `fragmentType` is non-nullable
|
||||
export function useFragment<TType>(
|
||||
_documentNode: DocumentTypeDecoration<TType, any>,
|
||||
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
|
||||
): TType;
|
||||
// return nullable if `fragmentType` is nullable
|
||||
export function useFragment<TType>(
|
||||
_documentNode: DocumentTypeDecoration<TType, any>,
|
||||
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
|
||||
): TType | null | undefined;
|
||||
// return array of non-nullable if `fragmentType` is array of non-nullable
|
||||
export function useFragment<TType>(
|
||||
_documentNode: DocumentTypeDecoration<TType, any>,
|
||||
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
|
||||
): ReadonlyArray<TType>;
|
||||
// return array of nullable if `fragmentType` is array of nullable
|
||||
export function useFragment<TType>(
|
||||
_documentNode: DocumentTypeDecoration<TType, any>,
|
||||
fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
|
||||
): ReadonlyArray<TType> | null | undefined;
|
||||
export function useFragment<TType>(
|
||||
_documentNode: DocumentTypeDecoration<TType, any>,
|
||||
fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
|
||||
): TType | ReadonlyArray<TType> | null | undefined {
|
||||
return fragmentType as any;
|
||||
}
|
||||
|
||||
|
||||
export function makeFragmentData<
|
||||
F extends DocumentTypeDecoration<any, any>,
|
||||
FT extends ResultOf<F>
|
||||
>(data: FT, _fragment: F): FragmentType<F> {
|
||||
return data as FragmentType<F>;
|
||||
}
|
||||
export function isFragmentReady<TQuery, TFrag>(
|
||||
queryNode: DocumentTypeDecoration<TQuery, any>,
|
||||
fragmentNode: TypedDocumentNode<TFrag>,
|
||||
data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
|
||||
): data is FragmentType<typeof fragmentNode> {
|
||||
const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
|
||||
?.deferredFields;
|
||||
|
||||
if (!deferredFields) return true;
|
||||
|
||||
const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
|
||||
const fragName = fragDef?.name?.value;
|
||||
|
||||
const fields = (fragName && deferredFields[fragName]) || [];
|
||||
return fields.length > 0 && fields.every(field => data && field in data);
|
||||
}
|
||||
62
web/src/gql/gql.ts
Normal file
62
web/src/gql/gql.ts
Normal file
@ -0,0 +1,62 @@
|
||||
/* eslint-disable */
|
||||
import * as types from './graphql';
|
||||
import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
|
||||
|
||||
/**
|
||||
* Map of all GraphQL operations in the project.
|
||||
*
|
||||
* This map has several performance disadvantages:
|
||||
* 1. It is not tree-shakeable, so it will include all operations in the project.
|
||||
* 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
|
||||
* 3. It does not support dead code elimination, so it will add unused operations.
|
||||
*
|
||||
* Therefore it is highly recommended to use the babel or swc plugin for production.
|
||||
*/
|
||||
const documents = {
|
||||
"\n query allEventSlugs {\n pages(contentType: \"events.EventPage\") {\n id\n slug\n }\n }\n ": types.AllEventSlugsDocument,
|
||||
"\n query eventBySlug($slug: String!) {\n event: page(contentType: \"events.EventPage\", slug: $slug) {\n ... on EventPage {\n ...Event\n }\n }\n }\n ": types.EventBySlugDocument,
|
||||
"\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n src\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceRegular\n }\n": types.EventFragmentDoc,
|
||||
"\n query allEvents {\n events: pages(contentType: \"events.EventPage\") {\n ... on EventPage {\n ...Event\n }\n }\n }\n ": types.AllEventsDocument,
|
||||
"\n query home {\n events: pages(contentType: \"events.EventPage\") {\n ...Event\n }\n }\n ": types.HomeDocument,
|
||||
};
|
||||
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
|
||||
* ```
|
||||
*
|
||||
* The query argument is unknown!
|
||||
* Please regenerate the types.
|
||||
*/
|
||||
export function graphql(source: string): unknown;
|
||||
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n query allEventSlugs {\n pages(contentType: \"events.EventPage\") {\n id\n slug\n }\n }\n "): (typeof documents)["\n query allEventSlugs {\n pages(contentType: \"events.EventPage\") {\n id\n slug\n }\n }\n "];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n query eventBySlug($slug: String!) {\n event: page(contentType: \"events.EventPage\", slug: $slug) {\n ... on EventPage {\n ...Event\n }\n }\n }\n "): (typeof documents)["\n query eventBySlug($slug: String!) {\n event: page(contentType: \"events.EventPage\", slug: $slug) {\n ... on EventPage {\n ...Event\n }\n }\n }\n "];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n src\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceRegular\n }\n"): (typeof documents)["\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n src\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceRegular\n }\n"];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n query allEvents {\n events: pages(contentType: \"events.EventPage\") {\n ... on EventPage {\n ...Event\n }\n }\n }\n "): (typeof documents)["\n query allEvents {\n events: pages(contentType: \"events.EventPage\") {\n ... on EventPage {\n ...Event\n }\n }\n }\n "];
|
||||
/**
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n query home {\n events: pages(contentType: \"events.EventPage\") {\n ...Event\n }\n }\n "): (typeof documents)["\n query home {\n events: pages(contentType: \"events.EventPage\") {\n ...Event\n }\n }\n "];
|
||||
|
||||
export function graphql(source: string) {
|
||||
return (documents as any)[source] ?? {};
|
||||
}
|
||||
|
||||
export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode< infer TType, any> ? TType : never;
|
||||
1202
web/src/gql/graphql.ts
Normal file
1202
web/src/gql/graphql.ts
Normal file
File diff suppressed because it is too large
Load Diff
2
web/src/gql/index.ts
Normal file
2
web/src/gql/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./fragment-masking";
|
||||
export * from "./gql";
|
||||
Reference in New Issue
Block a user