Fennec/fennec-fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(pipelines): commit logs.

Browse Source
This commit is contained in:
Ivan Li 2021-03-10 21:43:55 +08:00
parent 611341a8ce
commit 044e74b7ff
9 changed files with 24806 additions and 688 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

894
graphql.schema.json
View File

@ -6,7 +6,9 @@
"mutationType": {
"name": "Mutation"
},
"subscriptionType": null,
"subscriptionType": {
"name": "Subscription"
},
"types": [
{
"kind": "OBJECT",
@ -137,18 +139,6 @@
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "deletedAt",
"description": null,
"args": [],
"type": {
"kind": "SCALAR",
"name": "DateTime",
"ofType": null
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
@ -167,12 +157,262 @@
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "DateTime",
"description": "A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format.",
"kind": "OBJECT",
"name": "WorkUnit",
"description": null,
"fields": [
{
"name": "type",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "ENUM",
"name": "PipelineUnits",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "scripts",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "ENUM",
"name": "PipelineUnits",
"description": "流水线单元",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": [
{
"name": "checkout",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "installDependencies",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "test",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "deploy",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "cleanUp",
"description": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "WorkUnitMetadata",
"description": null,
"fields": [
{
"name": "version",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "Float",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "units",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "WorkUnit",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "Float",
"description": "The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point).",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Pipeline",
"description": null,
"fields": [
{
"name": "id",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "ID",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "project",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Project",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "branch",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "name",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "workUnitMetadata",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "WorkUnitMetadata",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
@ -366,442 +606,6 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "Float",
"description": "The `Float` scalar type represents signed double-precision fractional values as specified by [IEEE 754](https://en.wikipedia.org/wiki/IEEE_floating_point).",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Branch",
"description": null,
"fields": [
{
"name": "current",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "Boolean",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "name",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "commit",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "label",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "Boolean",
"description": "The `Boolean` scalar type represents `true` or `false`.",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "BranchList",
"description": null,
"fields": [
{
"name": "branches",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Branch",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "detached",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "Boolean",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "current",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "all",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "WorkUnit",
"description": null,
"fields": [
{
"name": "type",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "ENUM",
"name": "PipelineUnits",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "scripts",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "ENUM",
"name": "PipelineUnits",
"description": "流水线单元",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": [
{
"name": "checkout",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "installDependencies",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "test",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "deploy",
"description": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "cleanUp",
"description": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "WorkUnitMetadata",
"description": null,
"fields": [
{
"name": "version",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "Float",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "units",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "LIST",
"name": null,
"ofType": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "WorkUnit",
"ofType": null
}
}
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Pipeline",
"description": null,
"fields": [
{
"name": "id",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "ID",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "project",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "Project",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "projectId",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "branch",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "name",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "workUnitMetadata",
"description": null,
"args": [],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "WorkUnitMetadata",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "WorkUnitInput",
@ -978,72 +782,6 @@
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "listLogs",
"description": null,
"args": [
{
"name": "listLogsArgs",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "ListLogsArgs",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "LogList",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "listBranches",
"description": null,
"args": [
{
"name": "listBranchesArgs",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "INPUT_OBJECT",
"name": "ListBranchesArgs",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "BranchList",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "listPipelines",
"description": null,
@ -1120,72 +858,6 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "ListLogsArgs",
"description": null,
"fields": null,
"inputFields": [
{
"name": "projectId",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
},
{
"name": "branch",
"description": null,
"type": {
"kind": "SCALAR",
"name": "String",
"ofType": null
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "INPUT_OBJECT",
"name": "ListBranchesArgs",
"description": null,
"fields": null,
"inputFields": [
{
"name": "projectId",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Mutation",
@ -1743,6 +1415,60 @@
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "Subscription",
"description": null,
"fields": [
{
"name": "listLogsForPipeline",
"description": null,
"args": [
{
"name": "id",
"description": null,
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "SCALAR",
"name": "String",
"ofType": null
}
},
"defaultValue": null,
"isDeprecated": false,
"deprecationReason": null
}
],
"type": {
"kind": "NON_NULL",
"name": null,
"ofType": {
"kind": "OBJECT",
"name": "LogList",
"ofType": null
}
},
"isDeprecated": false,
"deprecationReason": null
}
],
"inputFields": null,
"interfaces": [],
"enumValues": null,
"possibleTypes": null
},
{
"kind": "SCALAR",
"name": "Boolean",
"description": "The `Boolean` scalar type represents `true` or `false`.",
"fields": null,
"inputFields": null,
"interfaces": null,
"enumValues": null,
"possibleTypes": null
},
{
"kind": "OBJECT",
"name": "__Schema",

24417
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -43,6 +43,7 @@
"preact-markup": "^2.1.1",
"preact-render-to-string": "^5.1.4",
"preact-router": "^3.2.1",
"subscriptions-transport-ws": "^0.9.18",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
},
"devDependencies": {

2
src/components/app.tsx
View File

@ -31,7 +31,7 @@ const Board = () => {
<Fragment>
<main>
<Router>
<Route path="/projects/:id" component={ProjectDetails} />
<Route path="/projects/:id/:rest*" component={ProjectDetails} />
<Route
path="/dev"
component={() => <PipelineEditor projectId="test" />}

34
src/components/commit-logs/commit-log-list.tsx
View File

@ -1,35 +1,41 @@
import { LogList, Project, ListLogsArgs } from '../../generated/graphql';
import {
LogList,
Project,
ListLogsArgs,
Pipeline
} from '../../generated/graphql';
import { h } from 'preact';
import { gql, useQuery } from '@apollo/client';
import { gql, useQuery, useSubscription } from '@apollo/client';
import styles from './commit-log-list.scss';
import { CommitActions } from '../commit-actions/commit-actions';
const LIST_LOGS = gql`
query ListLogs($args: ListLogsArgs!) {
listLogs(listLogsArgs: $args) {
subscription listLogsForPipeline($id: String!) {
listLogs: listLogsForPipeline(id: $id) {
all {
author_name
author_email
hash
message
body
date
hash
}
total
}
}
`;
interface Props {
project: Project;
branch?: string;
pipelineId?: string;
}
export const CommitLogList = ({ project, branch }: Props) => {
const { data, loading } = useQuery<
export const CommitLogList = ({ pipelineId }: Props) => {
console.log(pipelineId);
const { data, loading } = useSubscription<
{ listLogs: LogList },
{ args: ListLogsArgs }
{ id: string }
>(LIST_LOGS, {
variables: { args: { projectId: project.id, branch } }
variables: {
id: pipelineId!
}
});
const list = data?.listLogs?.all?.map(log => {
@ -37,7 +43,7 @@ export const CommitLogList = ({ project, branch }: Props) => {
<li className={styles.item} key={log.hash}>
<h4>{log.message}</h4>
<time dateTime={log.date}>{log.date}</time>
<CommitActions project={project} commitNumber={log.hash} />
{/* <CommitActions pipeline={pipeline} commitNumber={log.hash} /> */}
</li>
);
});

10
src/components/pipelines/pipeline-list.tsx
View File

@ -1,5 +1,5 @@
import { gql, useQuery, useMutation } from '@apollo/client';
import { makeAutoObservable } from 'mobx';
import { autorun, makeAutoObservable, reaction } from 'mobx';
import { useLocalObservable } from 'mobx-react-lite';
import { useCallback, useMemo } from 'preact/hooks';
import { h } from 'preact';
@ -18,6 +18,7 @@ import { createOverlay } from '../commons/overlay/overlay';
import { PipelineEditor } from '../../routes/pipelines/pipeline-editor';
import { LIST_PIPELINES } from './pipeline-list.constants';
import { Observer, observer } from 'mobx-react';
import { getCurrentUrl, route } from 'preact-router';
const DELETE_PIPELINE = gql`
mutation DeletePipeline($id: String!) {
@ -68,6 +69,13 @@ export const PipelineList = ({ projectId }: Props) => {
useMemo(() => store.setPipelines(pipelines), [store, pipelines]);
reaction(
() => store.currPipelineId,
() => {
route(`/projects/${projectId}/pipelines/${store.currPipelineId}`);
}
);
const Header = observer(() => {
const addPipeline = () => {
createOverlay({

87
src/generated/graphql.tsx
View File

@ -10,8 +10,6 @@ export type Scalars = {
Boolean: boolean;
Int: number;
Float: number;
/** A date-time string at UTC, such as 2019-12-03T09:54:33Z, compliant with the date-time format. */
DateTime: any;
};
export type Hello = {
@ -27,42 +25,6 @@ export type Project = {
sshUrl: Scalars['String'];
webUrl?: Maybe<Scalars['String']>;
webHookSecret?: Maybe<Scalars['String']>;
deletedAt?: Maybe<Scalars['DateTime']>;
};
export type LogFields = {
__typename?: 'LogFields';
hash: Scalars['String'];
date: Scalars['String'];
message: Scalars['String'];
refs: Scalars['String'];
body: Scalars['String'];
author_name: Scalars['String'];
author_email: Scalars['String'];
};
export type LogList = {
__typename?: 'LogList';
all: Array<LogFields>;
total: Scalars['Float'];
latest: LogFields;
};
export type Branch = {
__typename?: 'Branch';
current: Scalars['Boolean'];
name: Scalars['String'];
commit: Scalars['String'];
label: Scalars['String'];
};
export type BranchList = {
__typename?: 'BranchList';
branches: Array<Branch>;
detached: Scalars['Boolean'];
current: Scalars['String'];
all: Array<Scalars['String']>;
};
export type WorkUnit = {
@ -96,6 +58,24 @@ export type Pipeline = {
workUnitMetadata: WorkUnitMetadata;
};
export type LogFields = {
__typename?: 'LogFields';
hash: Scalars['String'];
date: Scalars['String'];
message: Scalars['String'];
refs: Scalars['String'];
body: Scalars['String'];
author_name: Scalars['String'];
author_email: Scalars['String'];
};
export type LogList = {
__typename?: 'LogList';
all: Array<LogFields>;
total: Scalars['Float'];
latest: LogFields;
};
export type WorkUnitInput = {
type: PipelineUnits;
scripts: Array<Scalars['String']>;
@ -111,8 +91,6 @@ export type Query = {
hello: Hello;
findProjects: Array<Project>;
findProject: Project;
listLogs: LogList;
listBranches: BranchList;
listPipelines: Array<Pipeline>;
findPipeline: Pipeline;
};
@ -123,16 +101,6 @@ export type QueryFindProjectArgs = {
};
export type QueryListLogsArgs = {
listLogsArgs: ListLogsArgs;
};
export type QueryListBranchesArgs = {
listBranchesArgs: ListBranchesArgs;
};
export type QueryListPipelinesArgs = {
projectId?: Maybe<Scalars['String']>;
};
@ -142,15 +110,6 @@ export type QueryFindPipelineArgs = {
id: Scalars['String'];
};
export type ListLogsArgs = {
projectId: Scalars['String'];
branch?: Maybe<Scalars['String']>;
};
export type ListBranchesArgs = {
projectId: Scalars['String'];
};
export type Mutation = {
__typename?: 'Mutation';
createProject: Project;
@ -222,3 +181,13 @@ export type UpdatePipelineInput = {
name: Scalars['String'];
workUnitMetadata: WorkUnitMetadataInput;
};
export type Subscription = {
__typename?: 'Subscription';
listLogsForPipeline: LogList;
};
export type SubscriptionListLogsForPipelineArgs = {
id: Scalars['String'];
};

9
src/routes/projects/project-details.tsx
View File

@ -8,7 +8,7 @@ import { ProjectEditor } from '../../components/projects/project-editor';
import { CommitLogList } from '../../components/commit-logs/commit-log-list';
import { makeAutoObservable } from 'mobx';
import { Observer, useLocalObservable } from 'mobx-react';
import { RoutableProps } from 'preact-router';
import Router, { RoutableProps, Route } from 'preact-router';
import { gql, useQuery } from '@apollo/client';
import { PipelineList } from '../../components/pipelines/pipeline-list';
@ -85,7 +85,12 @@ export const ProjectDetails = ({ id, path }: Props) => {
<PipelineList projectId={id} />
<Observer>
{(): any => (
<CommitLogList project={project} branch={store.branch} />
<Router>
<Route
path="/projects/:projectId/pipelines/:pipelineId"
component={CommitLogList}
/>
</Router>
)}
</Observer>
</div>

40
src/units/apollo-client.ts
View File

@ -1,6 +1,15 @@
import { Message } from './../components/commons/message/index';
import { ApolloClient, concat, HttpLink, InMemoryCache } from '@apollo/client';
import {
ApolloClient,
concat,
HttpLink,
InMemoryCache,
split
} from '@apollo/client';
import { onError } from '@apollo/client/link/error';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
export function createApolloClient() {
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
@ -14,13 +23,30 @@ export function createApolloClient() {
}
if (networkError) console.log(`[Network error]: ${networkError}`);
});
const wsLink = new WebSocketLink({
uri: `${location.protocol.replace('http', 'ws')}//${location.hostname}:${
location.port
}/api/graphql`,
options: {
reconnect: true
}
});
const httpLink = new HttpLink({
uri: '/api/graphql'
});
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink
);
return new ApolloClient({
cache: new InMemoryCache(),
link: concat(
errorLink,
new HttpLink({
uri: '/api/graphql'
})
)
link: concat(errorLink, splitLink)
});
}