diff --git a/frontend/codegen.ts b/frontend/codegen.ts index 0a651c3..cd97aa7 100644 --- a/frontend/codegen.ts +++ b/frontend/codegen.ts @@ -3,12 +3,14 @@ import type { CodegenConfig } from "@graphql-codegen/cli"; const hasuraSchema = { [process.env.HASURA_GRAPHQL_URL!]: { headers: { - "x-hasura-admin-secret": process.env.HASURA_GRAPHQL_ADMIN_SECRET || "", + "x-hasura-admin-secret": + process.env.NEXT_PUBLIC_HASURA_GRAPHQL_ADMIN_SECRET || "", }, }, }; const config: CodegenConfig = { + overwrite: true, config: { skipTypename: false, withHooks: true, @@ -17,9 +19,12 @@ const config: CodegenConfig = { gqlImport: "@urql/core#gql", }, schema: [hasuraSchema], + hooks: { + afterAllFileWrite: ["prettier --write"], + }, generates: { "./src/graphql/types.ts": { - documents: "query.graphql", + documents: "src/gql/*.gql", plugins: [ "typescript", "typescript-operations", diff --git a/frontend/src/gql/user_entities.gql b/frontend/src/gql/user_entities.gql new file mode 100644 index 0000000..78dcf7c --- /dev/null +++ b/frontend/src/gql/user_entities.gql @@ -0,0 +1,6 @@ +query GetOneUserName($id: String!) { + userEntityByPk(id: $id) { + firstName + lastName + } +} diff --git a/frontend/src/graphql/types.ts b/frontend/src/graphql/types.ts index c024e30..a646a3d 100644 --- a/frontend/src/graphql/types.ts +++ b/frontend/src/graphql/types.ts @@ -1,4 +1,6 @@ +import { gql } from "@urql/core"; import { IntrospectionQuery } from "graphql"; +import * as Urql from "urql"; export type Maybe = T | null; export type InputMaybe = Maybe; @@ -20,6 +22,7 @@ export type Incremental = | { [P in keyof T]?: P extends " $fragmentName" | "__typename" ? T[P] : never; }; +export type Omit = Pick>; /** All built-in and custom scalars, mapped to their actual values */ export type Scalars = { ID: { input: string; output: string }; @@ -28,6 +31,7 @@ export type Scalars = { Int: { input: number; output: number }; Float: { input: number; output: number }; bigint: { input: any; output: any }; + bytea: { input: any; output: any }; }; /** Boolean expression to compare columns of type "bigint". All fields are combined with logical 'AND'. */ @@ -349,6 +353,19 @@ export type BureauVarianceOrderBy = { id?: InputMaybe; }; +/** Boolean expression to compare columns of type "bytea". All fields are combined with logical 'AND'. */ +export type ByteaComparisonExp = { + _eq?: InputMaybe; + _gt?: InputMaybe; + _gte?: InputMaybe; + _in?: InputMaybe>; + _isNull?: InputMaybe; + _lt?: InputMaybe; + _lte?: InputMaybe; + _neq?: InputMaybe; + _nin?: InputMaybe>; +}; + /** ordering argument of a cursor */ export enum CursorOrdering { /** ascending ordering of the cursor */ @@ -1510,7 +1527,7 @@ export type KeycloakGroupBoolExp = { export enum KeycloakGroupConstraint { /** unique or primary key constraint on columns "id" */ ConstraintGroup = "constraint_group", - /** unique or primary key constraint on columns "parent_group", "realm_id", "name" */ + /** unique or primary key constraint on columns "realm_id", "name", "parent_group" */ SiblingNames = "sibling_names", } @@ -2130,6 +2147,9 @@ export type StringComparisonExp = { export type UserAttribute = { __typename?: "UserAttribute"; id: Scalars["String"]["output"]; + longValue?: Maybe; + longValueHash?: Maybe; + longValueHashLowerCase?: Maybe; name: Scalars["String"]["output"]; userId: Scalars["String"]["output"]; /** An object relationship */ @@ -2182,6 +2202,9 @@ export type UserAttributeBoolExp = { _not?: InputMaybe; _or?: InputMaybe>; id?: InputMaybe; + longValue?: InputMaybe; + longValueHash?: InputMaybe; + longValueHashLowerCase?: InputMaybe; name?: InputMaybe; userId?: InputMaybe; user_entity?: InputMaybe; @@ -2197,6 +2220,9 @@ export enum UserAttributeConstraint { /** input type for inserting data into table "user_attribute" */ export type UserAttributeInsertInput = { id?: InputMaybe; + longValue?: InputMaybe; + longValueHash?: InputMaybe; + longValueHashLowerCase?: InputMaybe; name?: InputMaybe; userId?: InputMaybe; user_entity?: InputMaybe; @@ -2207,6 +2233,7 @@ export type UserAttributeInsertInput = { export type UserAttributeMaxFields = { __typename?: "UserAttributeMaxFields"; id?: Maybe; + longValue?: Maybe; name?: Maybe; userId?: Maybe; value?: Maybe; @@ -2215,6 +2242,7 @@ export type UserAttributeMaxFields = { /** order by max() on columns of table "user_attribute" */ export type UserAttributeMaxOrderBy = { id?: InputMaybe; + longValue?: InputMaybe; name?: InputMaybe; userId?: InputMaybe; value?: InputMaybe; @@ -2224,6 +2252,7 @@ export type UserAttributeMaxOrderBy = { export type UserAttributeMinFields = { __typename?: "UserAttributeMinFields"; id?: Maybe; + longValue?: Maybe; name?: Maybe; userId?: Maybe; value?: Maybe; @@ -2232,6 +2261,7 @@ export type UserAttributeMinFields = { /** order by min() on columns of table "user_attribute" */ export type UserAttributeMinOrderBy = { id?: InputMaybe; + longValue?: InputMaybe; name?: InputMaybe; userId?: InputMaybe; value?: InputMaybe; @@ -2256,6 +2286,9 @@ export type UserAttributeOnConflict = { /** Ordering options when selecting data from "user_attribute". */ export type UserAttributeOrderBy = { id?: InputMaybe; + longValue?: InputMaybe; + longValueHash?: InputMaybe; + longValueHashLowerCase?: InputMaybe; name?: InputMaybe; userId?: InputMaybe; user_entity?: InputMaybe; @@ -2272,6 +2305,12 @@ export enum UserAttributeSelectColumn { /** column name */ Id = "id", /** column name */ + LongValue = "longValue", + /** column name */ + LongValueHash = "longValueHash", + /** column name */ + LongValueHashLowerCase = "longValueHashLowerCase", + /** column name */ Name = "name", /** column name */ UserId = "userId", @@ -2282,6 +2321,9 @@ export enum UserAttributeSelectColumn { /** input type for updating data in table "user_attribute" */ export type UserAttributeSetInput = { id?: InputMaybe; + longValue?: InputMaybe; + longValueHash?: InputMaybe; + longValueHashLowerCase?: InputMaybe; name?: InputMaybe; userId?: InputMaybe; value?: InputMaybe; @@ -2298,6 +2340,9 @@ export type UserAttributeStreamCursorInput = { /** Initial value of the column from where the streaming should start */ export type UserAttributeStreamCursorValueInput = { id?: InputMaybe; + longValue?: InputMaybe; + longValueHash?: InputMaybe; + longValueHashLowerCase?: InputMaybe; name?: InputMaybe; userId?: InputMaybe; value?: InputMaybe; @@ -2308,6 +2353,12 @@ export enum UserAttributeUpdateColumn { /** column name */ Id = "id", /** column name */ + LongValue = "longValue", + /** column name */ + LongValueHash = "longValueHash", + /** column name */ + LongValueHashLowerCase = "longValueHashLowerCase", + /** column name */ Name = "name", /** column name */ UserId = "userId", @@ -2978,7 +3029,7 @@ export type UserRoleMappingBoolExp = { /** unique or primary key constraints on table "user_role_mapping" */ export enum UserRoleMappingConstraint { - /** unique or primary key constraint on columns "role_id", "user_id" */ + /** unique or primary key constraint on columns "user_id", "role_id" */ ConstraintC = "constraint_c", } @@ -4543,6 +4594,19 @@ export type UserRoleMappingAggregateBoolExpCount = { filter?: InputMaybe; predicate: IntComparisonExp; }; + +export type GetOneUserNameQueryVariables = Exact<{ + id: Scalars["String"]["input"]; +}>; + +export type GetOneUserNameQuery = { + __typename?: "query_root"; + userEntityByPk?: { + __typename?: "UserEntity"; + firstName?: string | null; + lastName?: string | null; + } | null; +}; export default { __schema: { queryType: { @@ -8048,6 +8112,30 @@ export default { }, args: [], }, + { + name: "longValue", + type: { + kind: "SCALAR", + name: "Any", + }, + args: [], + }, + { + name: "longValueHash", + type: { + kind: "SCALAR", + name: "Any", + }, + args: [], + }, + { + name: "longValueHashLowerCase", + type: { + kind: "SCALAR", + name: "Any", + }, + args: [], + }, { name: "name", type: { @@ -8196,6 +8284,14 @@ export default { }, args: [], }, + { + name: "longValue", + type: { + kind: "SCALAR", + name: "Any", + }, + args: [], + }, { name: "name", type: { @@ -8235,6 +8331,14 @@ export default { }, args: [], }, + { + name: "longValue", + type: { + kind: "SCALAR", + name: "Any", + }, + args: [], + }, { name: "name", type: { @@ -16275,3 +16379,21 @@ export default { directives: [], }, } as unknown as IntrospectionQuery; + +export const GetOneUserNameDocument = gql` + query GetOneUserName($id: String!) { + userEntityByPk(id: $id) { + firstName + lastName + } + } +`; + +export function useGetOneUserNameQuery( + options: Omit, "query"> +) { + return Urql.useQuery({ + query: GetOneUserNameDocument, + ...options, + }); +} diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index 4687e73..4386632 100644 --- a/frontend/src/pages/_app.tsx +++ b/frontend/src/pages/_app.tsx @@ -3,11 +3,27 @@ import "@/styles/globals.css"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import { Session } from "next-auth"; import { SessionProvider } from "next-auth/react"; +import { cacheExchange, createClient, fetchExchange, Provider } from "urql"; import { Layout } from "@/components/layout"; import type { AppProps } from "next/app"; +const isServer = typeof window === "undefined"; + +const client = createClient({ + url: isServer + ? process.env.HASURA_GRAPHQL_URL || "" + : process.env.NEXT_PUBLIC_HASURA_GRAPHQL_URL || "", + fetchOptions: { + headers: { + "x-hasura-admin-secret": + process.env.NEXT_PUBLIC_HASURA_GRAPHQL_ADMIN_SECRET || "", + }, + }, + exchanges: [cacheExchange, fetchExchange], +}); + export default function App({ Component, pageProps: { session, ...pageProps }, @@ -16,20 +32,23 @@ export default function App({ breakpoints: { values: { xs: 0, - sm: 660, // default: 600 + sm: 660, md: 900, - lg: 1024, // default: 1200 + lg: 1024, xl: 1536, }, }, }); + return ( - - - - - + + + + + + + ); } diff --git a/frontend/src/pages/username.tsx b/frontend/src/pages/username.tsx index 39669f3..a170edd 100644 --- a/frontend/src/pages/username.tsx +++ b/frontend/src/pages/username.tsx @@ -2,30 +2,33 @@ import { Grid, TextField, Stack, Button, Box, Typography } from "@mui/material"; import { NextPage } from "next"; import { useRouter } from "next/router"; import { useState } from "react"; +import { useQuery } from "urql"; import { DetailLayout } from "@/components/layout"; import { DETAIL_PAGE_CONSTANTS } from "@/constants/detailPage"; +import { GetOneUserNameDocument } from "@/graphql/types"; + +import type { GetOneUserNameQuery } from "@/graphql/types"; export const UserName: NextPage = () => { const router = useRouter(); const details = DETAIL_PAGE_CONSTANTS.username; - // TODO: API側から名前を取得するメソッドを作成する - const getCurrentName = (): { - currentFirstName: string; - currentLastName: string; - } => ({ - currentFirstName: "技大", - currentLastName: "太郎", + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); + const [result, reexecuteQuery] = useQuery({ + query: GetOneUserNameDocument, + variables: { + id: "ef3eabbe-9f27-4fa9-976b-1954311841c1", + }, }); - - const { currentFirstName, currentLastName } = getCurrentName(); - - const [firstName, setFirstName] = useState(currentFirstName); - const [lastName, setLastName] = useState(currentLastName); - + const { data, fetching, error } = result; + const myFirstName = result?.data?.userEntityByPk?.firstName; + const myLastName = result?.data?.userEntityByPk?.lastName; const saveName = () => { - console.log(firstName + lastName); // eslint-disable-line no-console + // TODO: 名前を保存する機能の実装 + // console.log("元の名前は" + myLastName + myFirstName); + // console.log("変更後は" + lastName + firstName); }; const cancell = () => { diff --git a/settings/dev/front.env b/settings/dev/front.env index fe955f7..aa0ec6c 100644 Binary files a/settings/dev/front.env and b/settings/dev/front.env differ