feat(faustwp-core): add typed GraphQL client (fetchGraphQL<T>) and FaustClient

packages/faustwp-core/src/__tests__/client.test.ts

@@ -0,0 +1,13 @@
+import { FaustClient } from '../client';
+
+const mockFetch = async () => ({
+  ok: true,
+  status: 200,
+  json: async () => ({ data: { hello: 'world' } }),
+}) as any;
+
+test('FaustClient query returns typed data', async () => {
+  const client = new FaustClient('https://fake/graphql', { fetch: mockFetch });
+  const data = await client.query<{ hello: string }>('query { hello }');
+  expect(data.hello).toBe('world');
+});

packages/faustwp-core/src/client.ts

@@ -1,185 +1,20 @@
-import {
-	ApolloClient,
-	ApolloClientOptions,
-	ApolloLink,
-	createHttpLink,
-	InMemoryCache,
-	InMemoryCacheConfig,
-	NormalizedCacheObject,
-} from '@apollo/client';
-import merge from 'deepmerge';
-import isEqual from 'lodash/isEqual.js';
-import { useMemo } from 'react';
-// eslint-disable-next-line import/extensions
-import { setContext } from '@apollo/client/link/context';
-// eslint-disable-next-line import/extensions
-import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
-import { sha256 } from 'js-sha256';
-// eslint-disable-next-line import/extensions
-import { AppProps } from 'next/app';
-import { ErrorLoggingLink } from './apollo/errorLoggingLink.js';
-import { getAccessToken } from './auth/index.js';
-import { getConfig } from './config/index.js';
-import { getGraphqlEndpoint } from './lib/getGraphqlEndpoint.js';
-import { hooks } from './wpHooks/index.js';
+import { fetchGraphQL } from './fetchGraphql';
 
-export const APOLLO_STATE_PROP_NAME = '__APOLLO_STATE__';
+export class FaustClient {
+  readonly url: string;
+  readonly fetchImpl: typeof fetch;
 
-declare global {
-	interface Window {
-		[APOLLO_STATE_PROP_NAME]: NormalizedCacheObject;
-	}
-}
-
-const windowApolloState =
-	typeof window !== 'undefined' ? window[APOLLO_STATE_PROP_NAME] : {};
-
-let apolloClient: ApolloClient<NormalizedCacheObject> | undefined;
-let apolloAuthClient: ApolloClient<NormalizedCacheObject> | undefined;
-
-export function createApolloClient(authenticated = false) {
-	const { possibleTypes, usePersistedQueries, useGETForQueries } = getConfig();
-
-	let inMemoryCacheObject: InMemoryCacheConfig = {
-		possibleTypes,
-		typePolicies: {
-			RootQuery: {
-				queryType: true,
-				fields: {
-					viewer: {
-						merge: true,
-					},
-				},
-			},
-			RootMutation: {
-				mutationType: true,
-			},
-		},
-	};
-
-	inMemoryCacheObject = hooks.applyFilters(
-		'apolloClientInMemoryCacheOptions',
-		inMemoryCacheObject,
-		{},
-	) as InMemoryCacheConfig;
-
-	let linkChain = ApolloLink.from([
-		new ErrorLoggingLink(),
-		createHttpLink({
-			uri: getGraphqlEndpoint(),
-			/**
-			 * Only add this option if usePersistedQueries is not set/false.
-			 * When persisted queries is enabled and this flag and useGETForHashedQueries
-			 * are both set, there is a conflict and persisted queries does not work.
-			 */
-			useGETForQueries: useGETForQueries && !usePersistedQueries,
-		}),
-	]);
-
-	// If the user requested to use persisted queries, apply the link.
-	if (usePersistedQueries) {
-		linkChain = createPersistedQueryLink({
-			sha256,
-			useGETForHashedQueries: useGETForQueries,
-		}).concat(linkChain);
-	}
-
-	// If the request is coming from the auth client, apply the auth link.
-	if (authenticated) {
-		linkChain = setContext((_, { headers }) => {
-			// get the authentication token from local storage if it exists
-			const token = getAccessToken();
-
-			// return the headers to the context so httpLink can read them
-			return {
-				headers: {
-					...headers,
-					authorization: token ? `Bearer ${token}` : '',
-				},
-			};
-		}).concat(linkChain);
-	}
-
-	let apolloClientOptions: ApolloClientOptions<NormalizedCacheObject> = {
-		ssrMode: typeof window === 'undefined',
-		devtools: {
-			enabled: typeof window !== 'undefined',
-		},
-		link: linkChain,
-		cache: new InMemoryCache(inMemoryCacheObject).restore(windowApolloState),
-	};
-
-	apolloClientOptions = hooks.applyFilters(
-		'apolloClientOptions',
-		apolloClientOptions,
-		{},
-	) as ApolloClientOptions<NormalizedCacheObject>;
-
-	return new ApolloClient(apolloClientOptions);
-}
-
-export function getApolloClient(initialState = null) {
-	// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
-	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) {
-		// Get existing cache, loaded during client side data fetching
-		const existingCache = _apolloClient.extract();
-
-		// Merge the initialState from getStaticProps/getServerSideProps in the existing cache
-		const data = merge(existingCache, initialState, {
-			// eslint-disable-next-line @typescript-eslint/no-unsafe-return
-			arrayMerge: (destination, source) => [
-				...source,
-				...destination.filter((d) => source.every((s) => !isEqual(d, s))),
-			],
-		});
-
-		// Restore the cache with the merged data
-		_apolloClient.cache.restore(data);
-	}
-	// 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;
-}
+  constructor(url: string, options?: { fetch?: typeof fetch }) {
+    if (!url) throw new Error('FaustClient requires a GraphQL URL');
+    this.url = url;
+    this.fetchImpl = options?.fetch ?? globalThis.fetch;
+  }
 
-export function getApolloAuthClient() {
-	// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
-	const _apolloAuthClient = apolloAuthClient ?? createApolloClient(true);
-
-	if (!apolloAuthClient) apolloAuthClient = _apolloAuthClient;
-
-	return _apolloAuthClient;
-}
-
-export function addApolloState(
-	client: ApolloClient<NormalizedCacheObject>,
-	pageProps: AppProps<{
-		props: { [key: string]: any };
-		revalidate?: number | boolean;
-	}>['pageProps'],
-): AppProps<{
-	props: { [key: string]: any };
-	revalidate?: number | boolean;
-}>['pageProps'] {
-	if (pageProps?.props) {
-		// eslint-disable-next-line no-param-reassign
-		pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
-	}
-
-	return pageProps;
-}
+  async query<T = any>(query: string, variables?: Record<string, any>): Promise<T> {
+    return fetchGraphQL<T>(this.url, query, variables, this.fetchImpl);
+  }
 
-export function useApollo(
-	pageProps: AppProps<{ [key: string]: any }>['pageProps'],
-) {
-	const state = pageProps[APOLLO_STATE_PROP_NAME];
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-	const store = useMemo(() => getApolloClient(state), [state]);
-	return store;
+  async mutate<T = any>(mutation: string, variables?: Record<string, any>): Promise<T> {
+    return fetchGraphQL<T>(this.url, mutation, variables, this.fetchImpl);
+  }
 }

packages/faustwp-core/src/fetchGraphql.ts

@@ -0,0 +1,32 @@
+export async function fetchGraphQL<T = any>(
+  url: string,
+  query: string,
+  variables?: Record<string, any>,
+  fetchImpl: typeof fetch = globalThis.fetch
+): Promise<T> {
+  if (!fetchImpl) {
+    throw new Error('No fetch implementation found');
+  }
+
+  const res = await fetchImpl(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query, variables }),
+  });
+
+  if (!res.ok) {
+    const text = await res.text().catch(() => '');
+    throw new Error(`Network error: ${res.status} ${res.statusText} - ${text}`);
+  }
+
+  const json = (await res.json()) as GraphQLResponse<T>;
+
+  if (json.errors?.length) {
+    const message = json.errors.map((e) => e.message).join('\n');
+    const err: Error & { graphql?: GraphQLResponse<T> } = new Error(`GraphQL errors:\n${message}`);
+    err.graphql = json;
+    throw err;
+  }
+
+  return (json.data as T) ?? ({} as T);
+}

packages/faustwp-core/src/index.ts

@@ -1,90 +1,3 @@
-import { FaustProvider } from './components/FaustProvider.js';
-import {
-	WordPressTemplate,
-	FaustTemplateProps,
-} from './components/WordPressTemplate.js';
-import { getWordPressProps, FaustTemplate } from './getWordPressProps.js';
-import {
-	getNextStaticProps,
-	getNextServerSideProps,
-	FaustPage,
-} from './getProps.js';
-import { getConfig, setConfig, FaustConfig } from './config/index.js';
-import { ensureAuthorization } from './auth/index.js';
-import { authorizeHandler, logoutHandler, apiRouter } from './server/index.js';
-import { withFaust } from './config/withFaust.js';
-import { getWpUrl } from './lib/getWpUrl.js';
-import { getAdminUrl } from './lib/getAdminUrl.js';
-import { getGraphqlEndpoint } from './lib/getGraphqlEndpoint.js';
-import { getWpHostname } from './lib/getWpHostname.js';
-import {
-	getApolloClient,
-	getApolloAuthClient,
-	addApolloState,
-} from './client.js';
-import { FaustPlugin, hooks } from './wpHooks/index.js';
-import { FaustHooks } from './wpHooks/overloads.js';
-import {
-	getSitemapProps,
-	GetSitemapPropsConfig,
-} from './server/sitemaps/getSitemapProps.js';
-import { useAuth } from './hooks/useAuth.js';
-import { useLogin } from './hooks/useLogin.js';
-import { useLogout } from './hooks/useLogout.js';
-import { useFaustQuery } from './hooks/useFaustContext.js';
-import { FaustContext } from './store/FaustContext.js';
-
-import {
-	FaustToolbarNodes,
-	FaustToolbarContext,
-	ToolbarNode,
-	ToolbarItem,
-	ToolbarNodeSkeleton,
-	ToolbarSubmenu,
-	ToolbarSubmenuWrapper,
-} from './components/Toolbar/index.js';
-import { flatListToHierarchical } from './utils/flatListToHierarchical.js';
-
-export {
-	flatListToHierarchical,
-	FaustProvider,
-	WordPressTemplate,
-	FaustTemplateProps,
-	getWordPressProps,
-	getNextStaticProps,
-	getNextServerSideProps,
-	getConfig,
-	setConfig,
-	FaustConfig,
-	ensureAuthorization,
-	authorizeHandler,
-	logoutHandler,
-	apiRouter,
-	withFaust,
-	getWpHostname,
-	getWpUrl,
-	getAdminUrl,
-	getGraphqlEndpoint,
-	getApolloClient,
-	getApolloAuthClient,
-	addApolloState,
-	FaustPlugin,
-	FaustHooks,
-	getSitemapProps,
-	GetSitemapPropsConfig,
-	useAuth,
-	useLogin,
-	useLogout,
-	FaustToolbarNodes,
-	FaustToolbarContext,
-	ToolbarNode,
-	ToolbarItem,
-	ToolbarNodeSkeleton,
-	ToolbarSubmenu,
-	ToolbarSubmenuWrapper,
-	FaustTemplate,
-	FaustPage,
-	hooks,
-	useFaustQuery,
-	FaustContext,
-};
+export * from './types';
+export * from './fetchGraphql';
+export * from './client';

packages/faustwp-core/src/types.ts

@@ -0,0 +1,12 @@
+export interface GraphQLError {
+  message: string;
+  locations?: { line: number; column: number }[];
+  path?: Array<string | number>;
+  extensions?: Record<string, any>;
+}
+
+export interface GraphQLResponse<TData = any> {
+  data?: TData;
+  errors?: GraphQLError[];
+  extensions?: Record<string, any>;
+}