@okam/directus-query 0.0.1 → 1.1.0

package/.eslintrc.js

@@ -0,0 +1,21 @@
+const { getDefaultIgnorePatterns } = require("../../../linter/helpers");
+
+module.exports = {
+  extends: ['plugin:@nx/react', '../../../.eslintrc.js', '../../../linter/bases/typescript', '../../../linter/bases/regexp', '../../../linter/bases/jest', '../../../linter/bases/rtl', '../../../linter/bases/storybook', '../../../linter/bases/react', '../../../linter/bases/prettier', 'plugin:storybook/recommended'],
+  ignorePatterns: ['!**/*', ...getDefaultIgnorePatterns()],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+      // We set parserOptions.project for the project to allow TypeScript to create the type-checker behind the scenes when we run linting
+      parserOptions: {
+        project: `${__dirname}/tsconfig.*?.json`,
+      },
+      rules: {
+        "@nx/dependency-checks": "error"
+      }
+    },
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+}

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+## 1.1.0 (2024-06-28)
+
+
+### 🚀 Features
+
+- add new libs ([#71](https://github.com/OKAMca/stack/pull/71))
+
+- add gql query ([#73](https://github.com/OKAMca/stack/pull/73))
+
+
+### 🩹 Fixes
+
+- publishing for new libs ([#125](https://github.com/OKAMca/stack/pull/125))
+
+- **directus-query:** fix initDirectusQuery name ([#129](https://github.com/OKAMca/stack/pull/129))
+
+
+### ❤️  Thank You
+
+- Marie-Maxime Tanguay @marie-maxime
+- yanmorinokamca @yanmorinokamca

package/README.md

@@ -0,0 +1,30 @@
+# directus-query
+
+This library was generated with [Nx](https://nx.dev).
+
+# Usage with NextJS AppRouter
+
+To create a new client, first create a new file with the following content:
+
+```ts
+import { initDirectusQuery } from '@okam/directus-query'
+
+const queryClient = initDirectusQuery('https://example.com/api', {
+  credentials: 'include',
+  mode: 'cors',
+  fetch,ù
+  headers: {
+    Authorization: `Bearer ${process.env.AUTH_TOKEN}`,
+  },
+})
+
+export default queryClient
+```
+
+Then, you can use the client to query data from Directus:
+
+```ts
+const variables = {id: 1}
+const data = await queryClient.queryGql(DOCUMENT, variables)
+```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okam/directus-query",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/project.json

@@ -0,0 +1,32 @@
+{
+  "name": "directus-query",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/directus/directus-query/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/directus/directus-query/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/libs/directus/directus-query"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/hooks'
+export * from './lib/query'
+export { default as initDirectusQuery } from './lib/init'

package/src/lib/config.ts

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { RequestConfig } from 'graphql-request/build/esm/types'
+
+export const GRAPHQL_ENDPOINT = process.env.NEXT_PUBLIC_GRAPHQL_URL as string
+export const AUTH_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN as string
+
+export const defaultConfig = {
+  credentials: 'include',
+  mode: 'cors',
+  fetch,
+  headers: {
+    Authorization: `Bearer ${AUTH_TOKEN}`,
+  },
+} as RequestConfig

package/src/lib/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './use-graphql'
+export * from './use-suspense-graphql'

package/src/lib/hooks/use-graphql.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
+import { useQuery } from '@tanstack/react-query'
+import type { QueryOptions, UseQueryResult } from '@tanstack/react-query'
+import type { GraphQLClient, Variables } from 'graphql-request'
+import { getQueryValues, queryGql } from '../query'
+
+export function useGqlQuery<TResult, TVariables extends Variables>(
+  document: TypedDocumentNode<TResult, TVariables>,
+  variables?: TVariables,
+  options?: QueryOptions & { enabled: boolean; useErrorBoundary: boolean },
+  client?: GraphQLClient,
+): UseQueryResult<TResult> {
+  const values = getQueryValues<TResult, TVariables>(document, variables)
+
+  return useQuery({
+    queryKey: values,
+    queryFn: async ({ queryKey }) => queryGql(document, queryKey[1] as TVariables, client),
+    ...options,
+  })
+}
+
+export default useGqlQuery

package/src/lib/hooks/use-suspense-graphql.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import type { QueryOptions, UseSuspenseQueryResult } from '@tanstack/react-query'
+import type { Variables } from 'graphql-request'
+import { getQueryValues, queryGql } from '../query'
+import { graphqlRequestAdmin } from '../request'
+
+export function useSuspenseGqlQuery<TResult, TVariables extends Variables>(
+  document: TypedDocumentNode<TResult, TVariables>,
+  variables?: TVariables,
+  options?: QueryOptions & { enabled: boolean; useErrorBoundary: boolean },
+): UseSuspenseQueryResult<TResult> {
+  const values = getQueryValues<TResult, TVariables>(document, variables)
+
+  return useSuspenseQuery({
+    queryKey: values,
+    queryFn: async ({ queryKey }) => queryGql(document, queryKey[1] as TVariables),
+    ...options,
+  })
+}
+
+export function useSuspenseGqlQueryAdmin<TResult, TVariables extends Variables>(
+  document: TypedDocumentNode<TResult, TVariables>,
+  variables?: TVariables,
+  options?: QueryOptions,
+): UseSuspenseQueryResult<TResult> {
+  const values = getQueryValues<TResult, TVariables>(document, variables)
+  return useSuspenseQuery({
+    queryKey: values,
+    queryFn: async ({ queryKey }) => queryGql(document, queryKey[1] as TVariables, graphqlRequestAdmin),
+    ...options,
+  })
+}

package/src/lib/init.ts

@@ -0,0 +1,24 @@
+import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
+import { GraphQLClient } from 'graphql-request'
+import type { Variables } from 'graphql-request'
+import type { RequestConfig } from 'graphql-request/build/esm/types'
+import { GRAPHQL_ENDPOINT, defaultConfig } from './config'
+import { queryGql } from './query'
+
+const initDirectusQuery = (graphqlEndPoint = GRAPHQL_ENDPOINT, requestConfig: RequestConfig = defaultConfig) => {
+  const client = new GraphQLClient(graphqlEndPoint, requestConfig)
+
+  function internalQueryGql<TResult, TVariables extends Variables>(
+    document: TypedDocumentNode<TResult, TVariables>,
+    queryKey?: TVariables,
+  ) {
+    return queryGql(document, queryKey, client)
+  }
+
+  return {
+    queryGql: internalQueryGql,
+    client,
+  }
+}
+
+export default initDirectusQuery

package/src/lib/providers/index.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
+import { createCtx } from '@okam/core-lib'
+import type { QueryOptions } from '@tanstack/react-query'
+import type { Variables } from 'graphql-request'
+import { useCallback, useMemo } from 'react'
+import { useGqlQuery } from '../hooks'
+import type { TGQLQueryContextProps, TGQLQueryProviderProps } from './interface'
+
+const [useGql, GqlProvider] = createCtx<TGQLQueryContextProps>()
+
+export { useGql }
+
+export function GqlQueryContextProvider({ children, client }: Readonly<TGQLQueryProviderProps>) {
+  const gqlFn = useCallback(
+    function useInternalGqlQuery<TResult, TVariables extends Variables>(
+      document: TypedDocumentNode<TResult, TVariables>,
+      variables?: TVariables,
+      options?: QueryOptions & { enabled: boolean; useErrorBoundary: boolean },
+    ) {
+      return useGqlQuery<TResult, TVariables>(document, variables, options, client)
+    },
+    [client],
+  )
+
+  const value = useMemo<TGQLQueryContextProps>(() => ({ useGqlQuery: gqlFn }), [gqlFn])
+
+  return <GqlProvider value={value}>{children}</GqlProvider>
+}

package/src/lib/providers/interface.ts

@@ -0,0 +1,16 @@
+import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
+import type { UseQueryResult } from '@tanstack/react-query'
+import type { GraphQLClient, Variables } from 'graphql-request'
+import type React from 'react'
+
+export type TGQLQueryProviderProps = {
+  children: React.ReactNode
+  client: GraphQLClient
+}
+
+export type TGQLQueryContextProps = {
+  useGqlQuery: <TResult, TVariables extends Variables>(
+    document: TypedDocumentNode<TResult, TVariables>,
+    queryKey?: TVariables,
+  ) => UseQueryResult
+}

package/src/lib/query.ts

@@ -0,0 +1,22 @@
+import { type TypedDocumentNode } from '@graphql-typed-document-node/core'
+import type { Variables } from 'graphql-request'
+import { get } from 'radash'
+import graphqlRequestClient from './request'
+
+export function queryGql<TResult, TVariables extends Variables>(
+  document: TypedDocumentNode<TResult, TVariables>,
+  queryKey?: TVariables,
+  client = graphqlRequestClient,
+) {
+  return client.request<TResult>(document, {
+    ...queryKey,
+  })
+}
+
+export function getQueryValues<TResult, TVariables extends Variables>(
+  document: TypedDocumentNode<TResult, TVariables>,
+  variables?: TVariables,
+) {
+  const value = get<string>(document, 'definitions.0.name.value')
+  return [value, variables] as const
+}

package/src/lib/request.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable no-console */
+import { QueryCache, QueryClient } from '@tanstack/react-query'
+import { GraphQLClient } from 'graphql-request'
+
+const GRAPHQL_ENDPOINT = process.env.NEXT_PUBLIC_GRAPHQL_URL as string
+const GRAPHQL_ENDPOINT_ADMIN = process.env.NEXT_GRAPHQL_URL_ADMIN as string
+const AUTH_TOKEN = process.env.NEXT_PUBLIC_API_TOKEN as string
+const AUTH_TOKEN_ADMIN = process.env.NEXT_PUBLIC_API_TOKEN as string
+
+export const graphqlRequestClient = new GraphQLClient(GRAPHQL_ENDPOINT, {
+  credentials: 'include',
+  mode: 'cors',
+  fetch,
+  headers: {
+    Authorization: `Bearer ${AUTH_TOKEN}`,
+  },
+})
+
+export const graphqlRequestAdmin = new GraphQLClient(GRAPHQL_ENDPOINT_ADMIN, {
+  credentials: 'include',
+  mode: 'cors',
+  fetch,
+  headers: {
+    Authorization: `Bearer ${AUTH_TOKEN_ADMIN}`,
+  },
+})
+
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error) => {
+      console.error(error)
+    },
+  }),
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 1000,
+    },
+  },
+})
+
+export default graphqlRequestClient

package/src/server.ts

@@ -0,0 +1,2 @@
+export * from './lib/query'
+export { default as initDirectusQuery } from './lib/init'

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node", "vite/client"]
+  },
+  "files": [
+    "../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,51 @@
+/* eslint-disable import/no-relative-packages */
+/// <reference types="vitest" />
+import * as path from 'path'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import viteTsConfigPaths from 'vite-tsconfig-paths'
+import externalDeps from '../../../config/external-deps'
+
+export default defineConfig({
+  cacheDir: '../../../node_modules/.vite/directus-query',
+
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+    react(),
+    viteTsConfigPaths({
+      root: '../../../',
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [
+  //    viteTsConfigPaths({
+  //      root: '../../../',
+  //    }),
+  //  ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'directus-query',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: externalDeps,
+    },
+  },
+})

package/index.d.ts

@@ -1,3 +0,0 @@
-export * from './lib/hooks';
-export * from './lib/query';
-export { default as initDiretusQuery } from './lib/init';

package/index.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@tanstack/react-query"),l=require("radash"),a=require("graphql-request"),y=process.env.NEXT_PUBLIC_GRAPHQL_URL,q=process.env.NEXT_GRAPHQL_URL_ADMIN,Q=process.env.NEXT_PUBLIC_API_TOKEN,_=process.env.NEXT_PUBLIC_API_TOKEN,A=new a.GraphQLClient(y,{credentials:"include",mode:"cors",fetch,headers:{Authorization:`Bearer ${Q}`}}),N=new a.GraphQLClient(q,{credentials:"include",mode:"cors",fetch,headers:{Authorization:`Bearer ${_}`}});new t.QueryClient({queryCache:new t.QueryCache({onError:e=>{console.error(e)}}),defaultOptions:{queries:{staleTime:5*1e3}}});function o(e,r,n=A){return n.request(e,{...r})}function c(e,r){return[l.get(e,"definitions.0.name.value"),r]}function p(e,r,n,s){const u=c(e,r);return t.useQuery({queryKey:u,queryFn:async({queryKey:i})=>o(e,i[1],s),...n})}function T(e,r,n){const s=c(e,r);return t.useSuspenseQuery({queryKey:s,queryFn:async({queryKey:u})=>o(e,u[1]),...n})}function G(e,r,n){const s=c(e,r);return t.useSuspenseQuery({queryKey:s,queryFn:async({queryKey:u})=>o(e,u[1],N),...n})}const d=process.env.NEXT_PUBLIC_GRAPHQL_URL,h=process.env.NEXT_PUBLIC_API_TOKEN,P={credentials:"include",mode:"cors",fetch,headers:{Authorization:`Bearer ${h}`}},L=(e=d,r=P)=>{const n=new a.GraphQLClient(e,r);function s(u,i){return o(u,i,n)}return{queryGql:s,client:n}};exports.getQueryValues=c;exports.initDiretusQuery=L;exports.queryGql=o;exports.useGqlQuery=p;exports.useSuspenseGqlQuery=T;exports.useSuspenseGqlQueryAdmin=G;

package/index.mjs

@@ -1,87 +0,0 @@
-import { QueryClient as l, QueryCache as _, useQuery as y, useSuspenseQuery as a } from "@tanstack/react-query";
-import { get as q } from "radash";
-import { GraphQLClient as c } from "graphql-request";
-const N = process.env.NEXT_PUBLIC_GRAPHQL_URL, A = process.env.NEXT_GRAPHQL_URL_ADMIN, T = process.env.NEXT_PUBLIC_API_TOKEN, p = process.env.NEXT_PUBLIC_API_TOKEN, P = new c(N, {
-  credentials: "include",
-  mode: "cors",
-  fetch,
-  headers: {
-    Authorization: `Bearer ${T}`
-  }
-}), Q = new c(A, {
-  credentials: "include",
-  mode: "cors",
-  fetch,
-  headers: {
-    Authorization: `Bearer ${p}`
-  }
-});
-new l({
-  queryCache: new _({
-    onError: (e) => {
-      console.error(e);
-    }
-  }),
-  defaultOptions: {
-    queries: {
-      staleTime: 5 * 1e3
-    }
-  }
-});
-function u(e, r, n = P) {
-  return n.request(e, {
-    ...r
-  });
-}
-function i(e, r) {
-  return [q(e, "definitions.0.name.value"), r];
-}
-function G(e, r, n, s) {
-  const t = i(e, r);
-  return y({
-    queryKey: t,
-    queryFn: async ({ queryKey: o }) => u(e, o[1], s),
-    ...n
-  });
-}
-function v(e, r, n) {
-  const s = i(e, r);
-  return a({
-    queryKey: s,
-    queryFn: async ({ queryKey: t }) => u(e, t[1]),
-    ...n
-  });
-}
-function C(e, r, n) {
-  const s = i(e, r);
-  return a({
-    queryKey: s,
-    queryFn: async ({ queryKey: t }) => u(e, t[1], Q),
-    ...n
-  });
-}
-const f = process.env.NEXT_PUBLIC_GRAPHQL_URL, E = process.env.NEXT_PUBLIC_API_TOKEN, L = {
-  credentials: "include",
-  mode: "cors",
-  fetch,
-  headers: {
-    Authorization: `Bearer ${E}`
-  }
-}, R = (e = f, r = L) => {
-  const n = new c(e, r);
-  function s(t, o) {
-    return u(t, o, n);
-  }
-  return {
-    queryGql: s,
-    client: n
-  };
-};
-export {
-  i as getQueryValues,
-  R as initDiretusQuery,
-  u as queryGql,
-  G as useGqlQuery,
-  v as useSuspenseGqlQuery,
-  C as useSuspenseGqlQueryAdmin
-};

package/lib/config.d.ts

@@ -1,4 +0,0 @@
-import type { RequestConfig } from 'graphql-request/build/esm/types';
-export declare const GRAPHQL_ENDPOINT: string;
-export declare const AUTH_TOKEN: string;
-export declare const defaultConfig: RequestConfig;

package/lib/hooks/index.d.ts

@@ -1,2 +0,0 @@
-export * from './use-graphql';
-export * from './use-suspense-graphql';

package/lib/hooks/use-graphql.d.ts

@@ -1,8 +0,0 @@
-import { type TypedDocumentNode } from '@graphql-typed-document-node/core';
-import type { QueryOptions, UseQueryResult } from '@tanstack/react-query';
-import type { GraphQLClient, Variables } from 'graphql-request';
-export declare function useGqlQuery<TResult, TVariables extends Variables>(document: TypedDocumentNode<TResult, TVariables>, variables?: TVariables, options?: QueryOptions & {
-    enabled: boolean;
-    useErrorBoundary: boolean;
-}, client?: GraphQLClient): UseQueryResult<TResult>;
-export default useGqlQuery;

package/lib/hooks/use-suspense-graphql.d.ts

@@ -1,8 +0,0 @@
-import { type TypedDocumentNode } from '@graphql-typed-document-node/core';
-import type { QueryOptions, UseSuspenseQueryResult } from '@tanstack/react-query';
-import type { Variables } from 'graphql-request';
-export declare function useSuspenseGqlQuery<TResult, TVariables extends Variables>(document: TypedDocumentNode<TResult, TVariables>, variables?: TVariables, options?: QueryOptions & {
-    enabled: boolean;
-    useErrorBoundary: boolean;
-}): UseSuspenseQueryResult<TResult>;
-export declare function useSuspenseGqlQueryAdmin<TResult, TVariables extends Variables>(document: TypedDocumentNode<TResult, TVariables>, variables?: TVariables, options?: QueryOptions): UseSuspenseQueryResult<TResult>;

package/lib/init.d.ts

@@ -1,9 +0,0 @@
-import { type TypedDocumentNode } from '@graphql-typed-document-node/core';
-import { GraphQLClient } from 'graphql-request';
-import type { Variables } from 'graphql-request';
-import type { RequestConfig } from 'graphql-request/build/esm/types';
-declare const initDiretusQuery: (graphqlEndPoint?: string, requestConfig?: RequestConfig) => {
-    queryGql: <TResult, TVariables extends Variables>(document: TypedDocumentNode<TResult, TVariables>, queryKey?: TVariables | undefined) => Promise<TResult>;
-    client: GraphQLClient;
-};
-export default initDiretusQuery;

package/lib/query.d.ts

@@ -1,4 +0,0 @@
-import { type TypedDocumentNode } from '@graphql-typed-document-node/core';
-import type { Variables } from 'graphql-request';
-export declare function queryGql<TResult, TVariables extends Variables>(document: TypedDocumentNode<TResult, TVariables>, queryKey?: TVariables, client?: import("graphql-request").GraphQLClient): Promise<TResult>;
-export declare function getQueryValues<TResult, TVariables extends Variables>(document: TypedDocumentNode<TResult, TVariables>, variables?: TVariables): readonly [string, TVariables | undefined];

package/lib/request.d.ts

@@ -1,6 +0,0 @@
-import { QueryClient } from '@tanstack/react-query';
-import { GraphQLClient } from 'graphql-request';
-export declare const graphqlRequestClient: GraphQLClient;
-export declare const graphqlRequestAdmin: GraphQLClient;
-export declare const queryClient: QueryClient;
-export default graphqlRequestClient;