Skip to content

Commit e861288

Browse files
committed
remove redundant typeName in sample model
1 parent ad5a196 commit e861288

File tree

5 files changed

+91
-121
lines changed

5 files changed

+91
-121
lines changed

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"publish:local": "yarn workspaces run yalc push # then, use 'yalc link <package-name>' in your project",
1111
"link-yarn-legacy": "yarn workspaces foreach yarn link && ./scripts/link-duplicates.sh # deprecated, symlink creates issue with React, Webpack...",
1212
"unlink-yarn-legacy": "yarn workspaces foreach yarn unlink",
13-
"clean": "rm -Rf ./node_modules ./packages/*/node_modules && yarn run clean:build",
13+
"clean": "rm -Rf ./node_modules ./packages/*/node_modules ./starters/*/node_modules && yarn run clean:build",
1414
"clean:build": "rm -Rf ./packages/*/dist",
1515
"test": "jest",
1616
"typecheck": "tsc --noEmit",
@@ -115,6 +115,7 @@
115115
"resolutions": {
116116
"@types/react": "^17.0.16",
117117
"@types/react-dom": "^17.0.16",
118-
"@storybook/{app}/webpack": "^5"
118+
"@storybook/{app}/webpack": "^5",
119+
"graphql": "^15.6.2"
119120
}
120121
}

starters/express/src/models.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,6 @@ export const Repository = createGraphqlModelServer({
115115
fieldName: "contributor",
116116
kind: "hasOne",
117117
model: Contributor,
118-
typeName: "Contributor",
119118
},
120119
canRead: ["guests"],
121120
canCreate: ["guests"],
Lines changed: 75 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import type { ActionFunction } from "@remix-run/node";
2-
import { json, redirect } from "@remix-run/node";
32
import { Form, useActionData } from "@remix-run/react";
43
import * as React from "react";
54

6-
import { requireUserId } from "~/session.server";
75

86
import {
97
// When using a local executable shema (avoids an HTTP roundtrip)
@@ -14,8 +12,7 @@ import {
1412

1513
type ActionData = {
1614
errors?: {
17-
title?: string;
18-
body?: string;
15+
name?: string;
1916
};
2017
};
2118

@@ -30,14 +27,61 @@ mutation Insert_users($objects: [users_insert_input!]!) {
3027
}
3128
`;
3229

30+
// TODO: check how we can pick the mutation depending on the "update" or "create" scenario
31+
/**
32+
/*
33+
{
34+
"where": {
35+
"id": {
36+
"_eq": "e77584bb-3301-42b6-b952-297170cb8bc8"
37+
}
38+
},
39+
"set": {
40+
"name": "Eric Burel v2"
41+
}
42+
}*/
43+
const UPDATE_USER_MUTATION = /* GraphQL */ `
44+
mutation Update_users($where: users_bool_exp!, $set: users_set_input) {
45+
update_users(where: $where, _set: $set) {
46+
returning {
47+
id
48+
name
49+
}
50+
}
51+
}
52+
`
53+
54+
/**
55+
* {
56+
"deleteUsersWhere": {
57+
"id": {
58+
"_eq": ""
59+
}
60+
}
61+
}
62+
*/
63+
const DELETE_USER_MUTATION = /* GraphQL */ `
64+
mutation Delete_users($deleteUsersWhere: users_bool_exp!) {
65+
delete_users(where: $deleteUsersWhere) {
66+
returning {
67+
name
68+
}
69+
}
70+
}
71+
`
72+
73+
3374
// The `processRequestWithGraphQL` function can be used for both loaders and
3475
// actions!
35-
export const action: ActionFunction = (args) =>
76+
export const action: ActionFunction = (args: any) =>
77+
// TODO: how to handle multiple actions?
78+
// if (update)
3679
sendGraphQLRequest({
3780
args,
3881
// Space X API is one of the few to allow mutations
3982
// @see https://studio.apollographql.com/public/SpaceX-pxxbxen/home?variant=current
4083
endpoint: "https://api.spacex.land/graphql/",
84+
// TODO: get from args?
4185
variables: {
4286
"objects": [
4387
{ "name": "Eric Burel" }
@@ -46,115 +90,45 @@ export const action: ActionFunction = (args) =>
4690
//schema,
4791
query: INSERT_USER_MUTATION
4892
});
93+
// else
4994

50-
export default function NewNotePage() {
51-
const actionData = useActionData() as ActionData;
52-
const titleRef = React.useRef<HTMLInputElement>(null);
53-
const bodyRef = React.useRef<HTMLTextAreaElement>(null);
54-
55-
React.useEffect(() => {
56-
if (actionData?.errors?.title) {
57-
titleRef.current?.focus();
58-
} else if (actionData?.errors?.body) {
59-
bodyRef.current?.focus();
60-
}
61-
}, [actionData]);
62-
63-
return (
64-
<Form
65-
method="post"
66-
style={{
67-
display: "flex",
68-
flexDirection: "column",
69-
gap: 8,
70-
width: "100%",
71-
}}
72-
>
73-
<div>
74-
<label className="flex w-full flex-col gap-1">
75-
<span>Title: </span>
76-
<input
77-
ref={titleRef}
78-
name="title"
79-
className="flex-1 rounded-md border-2 border-blue-500 px-3 text-lg leading-loose"
80-
aria-invalid={actionData?.errors?.title ? true : undefined}
81-
aria-errormessage={
82-
actionData?.errors?.title ? "title-error" : undefined
83-
}
84-
/>
85-
</label>
86-
{actionData?.errors?.title && (
87-
<div className="pt-1 text-red-700" id="title-error">
88-
{actionData.errors.title}
89-
</div>
90-
)}
91-
</div>
92-
93-
<div>
94-
<label className="flex w-full flex-col gap-1">
95-
<span>Body: </span>
96-
<textarea
97-
ref={bodyRef}
98-
name="body"
99-
rows={8}
100-
className="w-full flex-1 rounded-md border-2 border-blue-500 py-2 px-3 text-lg leading-6"
101-
aria-invalid={actionData?.errors?.body ? true : undefined}
102-
aria-errormessage={
103-
actionData?.errors?.body ? "body-error" : undefined
104-
}
105-
/>
106-
</label>
107-
{actionData?.errors?.body && (
108-
<div className="pt-1 text-red-700" id="body-error">
109-
{actionData.errors.body}
110-
</div>
111-
)}
112-
</div>
113-
114-
<div className="text-right">
115-
<button
116-
type="submit"
117-
className="rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400"
118-
>
119-
Save
120-
</button>
121-
</div>
122-
</Form>
123-
);
124-
}
125-
126-
127-
128-
129-
130-
export default function IndexRoute() {
95+
export default function DistantApiMutationRoute() {
13196
// TODO: it would be more interesting to demo loading users
13297
// + updating them
13398
// const { data } = useLoaderData<LoaderData>();
13499
// if (!data) {
135100
// return "Ooops, something went wrong :(";
136101
// }
137102
const data: any = { posts: [] }
103+
const actionData = useActionData() as ActionData;
104+
const nameRef = React.useRef<HTMLInputElement>(null);
105+
106+
React.useEffect(() => {
107+
if (actionData?.errors?.name) {
108+
nameRef.current?.focus();
109+
}
110+
}, [actionData]);
138111

139112
return (
140113
<main>
141-
<h1>Blog Posts</h1>
142-
<ul>
143-
{data.posts.map((post: any) => (
144-
<li key={post.id}>
145-
{post.title} (by {post.author.name})
146-
<br />
147-
{post.likes} Likes
148-
<Form method="post">
149-
{/* `remix-graphql` will automatically transform all posted
114+
<h1>Create a SpaceX user</h1>
115+
<Form method="post" name="create">
116+
{/* `remix-graphql` will automatically transform all posted
150117
form data into variables of the same name for the GraphQL
151118
operation */}
152-
<input hidden name="id" value={post.id} />
153-
<button type="submit">Like</button>
154-
</Form>
155-
</li>
156-
))
157-
</ul>
119+
<input ref={nameRef} name="name"
120+
aria-invalid={actionData?.errors?.name ? true : undefined}
121+
aria-errormessage={
122+
actionData?.errors?.name ? "name-error" : undefined
123+
}
124+
/>
125+
{actionData?.errors?.name && (
126+
<div className="pt-1 text-red-700" id="title-error">
127+
{actionData.errors.name}
128+
</div>
129+
)}
130+
<button type="submit">Submite</button>
131+
</Form>
158132
</main>
159133
);
160134
}

starters/remix/app/routes/index.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,16 @@ export default function Index() {
3131
project deployed.
3232
</p>
3333
<div className="mx-auto mt-10 max-w-sm sm:flex sm:max-w-none sm:justify-center">
34+
<h2>GraphQL with a remote API</h2>
35+
<Link
36+
className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
37+
to="/distant-api/query">Query a distant API</Link>
38+
<Link
39+
className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-3 text-base font-medium text-yellow-700 shadow-sm hover:bg-yellow-50 sm:px-8"
40+
to="/distant-api/mutation">Send mutations to a distant API</Link>
41+
<h2>GraphQL with a local API</h2>
42+
<p>Work in progress...</p>
43+
<h2>Indie stack demoes</h2>
3444
{user ? (
3545
<Link
3646
to="/notes"

yarn.lock

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -17860,8 +17860,8 @@ __metadata:
1786017860

1786117861
"eslint-plugin-vulcan-internal@file:./packages/eslint-vulcan-internal::locator=root%40workspace%3A.":
1786217862
version: 1.0.0
17863-
resolution: "eslint-plugin-vulcan-internal@file:./packages/eslint-vulcan-internal#./packages/eslint-vulcan-internal::hash=43a088&locator=root%40workspace%3A."
17864-
checksum: 10e41c675566a5d6d0311f5ac398cff7f7dff14b1b4708bb018428318d50f0234a04748e285e9ee74efcd7d1643662d3cf122ffedd8c01ecee8a3db3dcef59ea
17863+
resolution: "eslint-plugin-vulcan-internal@file:./packages/eslint-vulcan-internal#./packages/eslint-vulcan-internal::hash=74e503&locator=root%40workspace%3A."
17864+
checksum: 2a412d4afb6628b172e7a7934421711645a2c0965706ec971c2a2670744aa4a5504a9b0a78c461cf5278e9a34d01d121e22e36d02cb18147ba69f3a98ccc4270
1786517865
languageName: node
1786617866
linkType: hard
1786717867

@@ -20266,27 +20266,13 @@ __metadata:
2026620266
languageName: node
2026720267
linkType: hard
2026820268

20269-
"graphql@npm:15.4.0":
20270-
version: 15.4.0
20271-
resolution: "graphql@npm:15.4.0"
20272-
checksum: 6b3240e5518dc2e7b2ba95fa251594e1a3c2f421b457759093c918986d218077c72117222bc2571be2cbd50b659793ae50e9e0eb2729c5858e6c2894e86011c1
20273-
languageName: node
20274-
linkType: hard
20275-
20276-
"graphql@npm:^15.5.0, graphql@npm:^15.5.1":
20269+
"graphql@npm:^15.6.2":
2027720270
version: 15.8.0
2027820271
resolution: "graphql@npm:15.8.0"
2027920272
checksum: 423325271db8858428641b9aca01699283d1fe5b40ef6d4ac622569ecca927019fce8196208b91dd1d8eb8114f00263fe661d241d0eb40c10e5bfd650f86ec5e
2028020273
languageName: node
2028120274
linkType: hard
2028220275

20283-
"graphql@npm:^16.3.0, graphql@npm:^16.4.0":
20284-
version: 16.5.0
20285-
resolution: "graphql@npm:16.5.0"
20286-
checksum: a82a926d085818934d04fdf303a269af170e79de943678bd2726370a96194f9454ade9d6d76c2de69afbd7b9f0b4f8061619baecbbddbe82125860e675ac219e
20287-
languageName: node
20288-
linkType: hard
20289-
2029020276
"gray-matter@npm:^4.0.2, gray-matter@npm:^4.0.3":
2029120277
version: 4.0.3
2029220278
resolution: "gray-matter@npm:4.0.3"

0 commit comments

Comments
 (0)