Make UI refreshing without invalidate all the cache
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
@@ -6,25 +6,19 @@ import {
|
||||
usePreloadedQuery,
|
||||
useQueryLoader,
|
||||
useMutation,
|
||||
ConnectionHandler,
|
||||
useRelayEnvironment,
|
||||
ConnectionHandler,
|
||||
} from "react-relay";
|
||||
import { Helmet } from "react-helmet-async";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import type { CreatePeoplePageQuery as CreatePeoplePageQueryType } from "./__generated__/CreatePeoplePageQuery.graphql";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { HelpCircle } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { CreatePeoplePageCreatePeopleMutation as CreatePeoplePageCreatePeopleMutationType } from "./__generated__/CreatePeoplePageCreatePeopleMutation.graphql";
|
||||
|
||||
const createPeoplePageQuery = graphql`
|
||||
query CreatePeoplePageQuery {
|
||||
@@ -38,13 +32,17 @@ const createPeoplePageQuery = graphql`
|
||||
`;
|
||||
|
||||
const createPeopleMutation = graphql`
|
||||
mutation CreatePeoplePageCreatePeopleMutation($input: CreatePeopleInput!) {
|
||||
mutation CreatePeoplePageCreatePeopleMutation($input: CreatePeopleInput!, $connections: [ID!]!) {
|
||||
createPeople(input: $input) {
|
||||
id
|
||||
fullName
|
||||
primaryEmailAddress
|
||||
additionalEmailAddresses
|
||||
kind
|
||||
peopleEdge @prependEdge(connections: $connections) {
|
||||
node {
|
||||
id
|
||||
fullName
|
||||
primaryEmailAddress
|
||||
additionalEmailAddresses
|
||||
kind
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -91,7 +89,7 @@ function CreatePeoplePageContent({
|
||||
const navigate = useNavigate();
|
||||
const environment = useRelayEnvironment();
|
||||
const data = usePreloadedQuery(createPeoplePageQuery, queryRef);
|
||||
const [commit] = useMutation(createPeopleMutation);
|
||||
const [commit] = useMutation<CreatePeoplePageCreatePeopleMutationType>(createPeopleMutation);
|
||||
const { toast } = useToast();
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: '',
|
||||
@@ -109,8 +107,11 @@ function CreatePeoplePageContent({
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const connecttionId = ConnectionHandler.getConnectionID(data.node.id, "PeopleListPageQuery_peoples");
|
||||
|
||||
commit({
|
||||
variables: {
|
||||
connections: [connecttionId],
|
||||
input: {
|
||||
organizationId: data.node.id,
|
||||
fullName: formData.fullName,
|
||||
@@ -120,18 +121,12 @@ function CreatePeoplePageContent({
|
||||
},
|
||||
},
|
||||
onCompleted: (response) => {
|
||||
environment.commitUpdate((store) => {
|
||||
const organization = store.get(data.node.id);
|
||||
if (organization) {
|
||||
organization.invalidateRecord();
|
||||
}
|
||||
})
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Person created successfully",
|
||||
variant: "default",
|
||||
});
|
||||
navigate(`/peoples/${(response as any).createPeople.id}`);
|
||||
navigate(`/peoples/${response.createPeople.peopleEdge.node.id}`);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* @generated SignedSource<<ea3c61409629d685dbb651ca60a8d0b7>>
|
||||
* @generated SignedSource<<e7e22eec683ab324fcd1cfe498845353>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
@@ -18,15 +18,20 @@ export type CreatePeopleInput = {
|
||||
primaryEmailAddress: string;
|
||||
};
|
||||
export type CreatePeoplePageCreatePeopleMutation$variables = {
|
||||
connections: ReadonlyArray<string>;
|
||||
input: CreatePeopleInput;
|
||||
};
|
||||
export type CreatePeoplePageCreatePeopleMutation$data = {
|
||||
readonly createPeople: {
|
||||
readonly additionalEmailAddresses: ReadonlyArray<string>;
|
||||
readonly fullName: string;
|
||||
readonly id: string;
|
||||
readonly kind: PeopleKind;
|
||||
readonly primaryEmailAddress: string;
|
||||
readonly peopleEdge: {
|
||||
readonly node: {
|
||||
readonly additionalEmailAddresses: ReadonlyArray<string>;
|
||||
readonly fullName: string;
|
||||
readonly id: string;
|
||||
readonly kind: PeopleKind;
|
||||
readonly primaryEmailAddress: string;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
export type CreatePeoplePageCreatePeopleMutation = {
|
||||
@@ -35,95 +40,156 @@ export type CreatePeoplePageCreatePeopleMutation = {
|
||||
};
|
||||
|
||||
const node: ConcreteRequest = (function(){
|
||||
var v0 = [
|
||||
var v0 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "connections"
|
||||
},
|
||||
v1 = {
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
},
|
||||
v2 = [
|
||||
{
|
||||
"defaultValue": null,
|
||||
"kind": "LocalArgument",
|
||||
"name": "input"
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
v1 = [
|
||||
{
|
||||
"alias": null,
|
||||
"args": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "input",
|
||||
"variableName": "input"
|
||||
}
|
||||
],
|
||||
"concreteType": "People",
|
||||
"kind": "LinkedField",
|
||||
"name": "createPeople",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "fullName",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "primaryEmailAddress",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "additionalEmailAddresses",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "kind",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
];
|
||||
v3 = {
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "PeopleEdge",
|
||||
"kind": "LinkedField",
|
||||
"name": "peopleEdge",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"concreteType": "People",
|
||||
"kind": "LinkedField",
|
||||
"name": "node",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "fullName",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "primaryEmailAddress",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "additionalEmailAddresses",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "kind",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
};
|
||||
return {
|
||||
"fragment": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"argumentDefinitions": [
|
||||
(v0/*: any*/),
|
||||
(v1/*: any*/)
|
||||
],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "CreatePeoplePageCreatePeopleMutation",
|
||||
"selections": (v1/*: any*/),
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreatePeoplePayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createPeople",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/)
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Mutation",
|
||||
"abstractKey": null
|
||||
},
|
||||
"kind": "Request",
|
||||
"operation": {
|
||||
"argumentDefinitions": (v0/*: any*/),
|
||||
"argumentDefinitions": [
|
||||
(v1/*: any*/),
|
||||
(v0/*: any*/)
|
||||
],
|
||||
"kind": "Operation",
|
||||
"name": "CreatePeoplePageCreatePeopleMutation",
|
||||
"selections": (v1/*: any*/)
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": (v2/*: any*/),
|
||||
"concreteType": "CreatePeoplePayload",
|
||||
"kind": "LinkedField",
|
||||
"name": "createPeople",
|
||||
"plural": false,
|
||||
"selections": [
|
||||
(v3/*: any*/),
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"filters": null,
|
||||
"handle": "prependEdge",
|
||||
"key": "",
|
||||
"kind": "LinkedHandle",
|
||||
"name": "peopleEdge",
|
||||
"handleArgs": [
|
||||
{
|
||||
"kind": "Variable",
|
||||
"name": "connections",
|
||||
"variableName": "connections"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"storageKey": null
|
||||
}
|
||||
]
|
||||
},
|
||||
"params": {
|
||||
"cacheID": "6674304ecdd07af45a837b942faed8f3",
|
||||
"cacheID": "3dc15f5a577685faa1c20d26a7f1d716",
|
||||
"id": null,
|
||||
"metadata": {},
|
||||
"name": "CreatePeoplePageCreatePeopleMutation",
|
||||
"operationKind": "mutation",
|
||||
"text": "mutation CreatePeoplePageCreatePeopleMutation(\n $input: CreatePeopleInput!\n) {\n createPeople(input: $input) {\n id\n fullName\n primaryEmailAddress\n additionalEmailAddresses\n kind\n }\n}\n"
|
||||
"text": "mutation CreatePeoplePageCreatePeopleMutation(\n $input: CreatePeopleInput!\n) {\n createPeople(input: $input) {\n peopleEdge {\n node {\n id\n fullName\n primaryEmailAddress\n additionalEmailAddresses\n kind\n }\n }\n }\n}\n"
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(node as any).hash = "c2962b44f158d7899d7e5b4d071e9238";
|
||||
(node as any).hash = "5ac3b2fbe80bf8a35d5595c6658a39cc";
|
||||
|
||||
export default node;
|
||||
|
||||
Reference in New Issue
Block a user