1
0
mirror of https://github.com/matrix-org/matrix-authentication-service.git synced 2025-11-24 23:01:05 +03:00

frontend: Migrate to jotai and urql

This cuts the bundle size by 50% and makes it easier to reason about state.
It removes the usage of react-router-dom and replaces it with a simple router atom based on jotai-location.
Since the screens will be quite simple, I don't expect that we'll need the advanced caching features of react-relay, hence the switch to urql.
This commit is contained in:
Quentin Gliech
2023-03-20 18:08:58 +01:00
parent 17e4bb70c1
commit b26d12f52f
40 changed files with 3008 additions and 3112 deletions

View File

@@ -12,32 +12,28 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { graphql, useLazyLoadQuery } from "react-relay";
import { useParams } from "react-router-dom";
import { useAtomValue } from "jotai";
import { useMemo } from "react";
import { atomsWithQuery } from "jotai-urql";
import { graphql } from "../gql";
import type { OAuth2ClientQuery } from "./__generated__/OAuth2ClientQuery.graphql";
const OAuth2Client: React.FC = () => {
const { id } = useParams();
if (!id) {
throw new Error("Missing parameter");
const QUERY = graphql(/* GraphQL */ `
query OAuth2ClientQuery($id: ID!) {
oauth2Client(id: $id) {
id
clientId
clientName
clientUri
tosUri
policyUri
redirectUris
}
}
`);
const data = useLazyLoadQuery<OAuth2ClientQuery>(
graphql`
query OAuth2ClientQuery($id: ID!) {
oauth2Client(id: $id) {
id
clientId
clientName
clientUri
tosUri
policyUri
redirectUris
}
}
`,
{ id }
const OAuth2Client: React.FC<{ id: string }> = ({ id }) => {
const data = useAtomValue(
useMemo(() => atomsWithQuery(QUERY, () => ({ id })), [id])[0]
);
return (