Update getList provider.

example-graphql/src/App.tsx

@@ -1,6 +1,15 @@
 import React from "react";
+import { useEffect } from "react";
+import { useState } from "react";
 
-import { Admin, Resource, AuthProvider, JsonGraphqlServer } from "readmin";
+import {
+ Admin,
+ Resource,
+ AuthProvider,
+ JsonGraphqlServer,
+ createClient,
+ introspectionQuery,
+} from "readmin";
 import { PostList, PostCreate, PostEdit } from "./components/pages/post";
 
 function App() {
@@ -32,10 +41,24 @@ function App() {
  }),
  };
 
+ const client = createClient("http:https://localhost:3000");
+
+ const [introspection, setIntrospection] = useState(null);
+
+ useEffect(() => {
+ introspectionQuery(client).then((response: any) =>
+ setIntrospection(response),
+ );
+ }, []);
+
+ if (!introspection) {
+ return <span>loading...</span>;
+ }
+
  return (
  <Admin
  authProvider={authProvider}
- dataProvider={JsonGraphqlServer("/api")}
+ dataProvider={JsonGraphqlServer(client, introspection)}
  >
  <Resource
  name="Posts"

example-graphql/src/components/pages/post.tsx

@@ -8,7 +8,7 @@ import {
  Form,
  TextField,
  Input,
- useApiUrl,
+ InputNumber,
 } from "readmin";
 
 export const PostList = (props: any) => {
@@ -66,6 +66,17 @@ export const PostCreate = (props: any) => {
  return (
  <Create {...props}>
  <Form wrapperCol={{ span: 14 }} layout="vertical">
+ <Form.Item
+ label="Id"
+ name="id"
+ rules={[
+ {
+ required: true,
+ },
+ ]}
+ >
+ <InputNumber />
+ </Form.Item>
  <Form.Item
  label="Title"
  name="title"
@@ -77,6 +88,28 @@ export const PostCreate = (props: any) => {
  >
  <Input />
  </Form.Item>
+ <Form.Item
+ label="Views"
+ name="views"
+ rules={[
+ {
+ required: true,
+ },
+ ]}
+ >
+ <InputNumber />
+ </Form.Item>
+ <Form.Item
+ label="UserId"
+ name="user_id"
+ rules={[
+ {
+ required: true,
+ },
+ ]}
+ >
+ <InputNumber />
+ </Form.Item>
  </Form>
  </Create>
  );

src/contexts/data/IDataContext.ts

@@ -26,8 +26,8 @@ export interface GetListResponse<TData extends BaseRecord = BaseRecord> {
  total: number;
 }
 
-export interface CreateResponse<TData extends BaseRecord = BaseRecord> {
- data: TData;
+export interface CreateResponse {
+ data: BaseRecord;
 }
 
 export interface UpdateResponse {
@@ -38,8 +38,8 @@ export interface UpdateManyResponse {
  data: BaseRecord[];
 }
 
-export interface GetOneResponse<TData extends BaseRecord = BaseRecord> {
- data: TData;
+export interface GetOneResponse {
+ data: BaseRecord;
 }
 
 export interface GetManyResponse<TData extends BaseRecord = BaseRecord> {
@@ -74,11 +74,8 @@ export interface IDataContext {
  resource: string,
  id: Identifier,
  fields?: string[],
- ) => Promise<GetOneResponse<TData>>;
- create: <TData extends BaseRecord = BaseRecord>(
- resource: string,
- params: Params,
- ) => Promise<CreateResponse<TData>>;
+ ) => Promise<GetOneResponse>;
+ create: (resource: string, params: Params) => Promise<CreateResponse>;
  update: <TParams extends BaseRecord = BaseRecord>(
  resource: string,
  id: Identifier,
@@ -94,5 +91,5 @@ export interface IDataContext {
  resource: string,
  ids: Identifier[],
  ) => Promise<DeleteManyResponse>;
- getApiUrl: () => string;
+ getApiUrl?: () => string;
 }

src/dataProviders/graphql/client.ts

@@ -0,0 +1,8 @@
+import { GraphQLClient } from "graphql-request";
+import { RequestInit } from "graphql-request/dist/types.dom";
+
+const createClient = (url: string, options?: RequestInit) => {
+ return new GraphQLClient(url, options);
+};
+
+export { createClient };

src/dataProviders/graphql/index.ts

@@ -0,0 +1,2 @@
+export { createClient } from "./client";
+export { introspectionQuery } from "./introspection";

src/dataProviders/graphql/introspection.ts

@@ -2,7 +2,7 @@ import { getIntrospectionQuery, IntrospectionQuery } from "graphql";
 import { GraphQLClient } from "graphql-request";
 import gql from "graphql-tag";
 
-export default async (client: GraphQLClient) => {
+const introspectionQuery = async (client: GraphQLClient) => {
  const introspectionRequest: Promise<IntrospectionQuery> = client.request(
  gql`
  ${getIntrospectionQuery()}
@@ -33,3 +33,5 @@ export default async (client: GraphQLClient) => {
  types,
  };
 };
+
+export { introspectionQuery };

src/dataProviders/graphql/utility.ts

@@ -0,0 +1,48 @@
+import * as gqlBuilder from "gql-query-builder";
+import { singular } from "pluralize";
+import IQueryBuilderOptions from "gql-query-builder/build/IQueryBuilderOptions";
+import { GraphQLClient } from "graphql-request";
+
+type Actions =
+ | "getList"
+ | "getMany"
+ | "getOne"
+ | "create"
+ | "update"
+ | "updateMany"
+ | "deleteOne"
+ | "deleteMany"
+ | "metaData";
+
+const createOperationName = (resourceName: string, action: Actions): string => {
+ switch (action) {
+ case "create":
+ case "update":
+ return `${action}${singular(resourceName)}`;
+ case "getList":
+ return `all${resourceName}`;
+ case "metaData":
+ return `_all${resourceName}Meta`;
+ }
+ return "";
+};
+
+const query = async (
+ client: GraphQLClient,
+ options: IQueryBuilderOptions | IQueryBuilderOptions[],
+) => {
+ const qb = gqlBuilder.query(options);
+
+ return client.request(qb.query, qb.variables);
+};
+
+const mutation = async (
+ client: GraphQLClient,
+ options: IQueryBuilderOptions | IQueryBuilderOptions[],
+) => {
+ const qb = gqlBuilder.mutation(options);
+
+ return client.request(qb.query, qb.variables);
+};
+
+export { createOperationName, query, mutation };