Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ How Woovi uses Relay?

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š How Woovi uses Relay?


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: dev.to

What is Relay?

If you look at relay.dev, Relay is the GraphQL client that scales with you. This definition is simple and defines Relay pretty well for the ones that already know all the features that Relay brings to the table.

For the ones that still having used Relay or still do not understand all the benefits of using Relay, this article provides practical examples of how Woovi is using Relay to scale their backend and frontend.

Relay Architecture

Relay is composed by many packages. Understanding each package, can help you understand how Relay works.

Relay Compiler

Relay Compiler will read all GraphQL operations (queries, mutations, subscriptions), and fragments. It will parse, transform and optimize.

You can play with some Relay Compiler transforms here Relay Compiler Repl

Relay Compiler also polyfill GraphQL fragments to enable variables at fragment level, as GraphQL still do not support variables at fragment level yet.

Relay Compiler also ensure everything is correct, you won't be able to send a broke query to production, it won't even compile.

The output of this optimization uses AST, and it is stored on __generated__ folders. You can explore GraphQL AST using AST Explorer.

babel-plugin-relay

Relay provides a babel plugin that replaces the graphql tag to require the artifact generated static query generated by Relay Compiler.

Here is an example of this transformation

const user = useFragment(
    graphql`
      fragment App_user on User {
        app
      }
    `,
    props.user,
  );

Transforms into

const user = useFragment(require('./__generated__/App_user.graphql.ts'),
    props.user,
  );

Relay Test Utils

We use Relay Test Utils in our integration tests at frontend. It makes it pretty easy to mock Relay environment and any GraphQL query or field.

Below is an example of a mock resolver that tells relay test utils to mock every User to have a name Woovi. I don't need to mock the whole GraphQL operation, just the fields that make sense for my test case. It reduces a lot the number of fixtures.

const mockResolver = {
   User: () => ({ name: 'Woovi'}),
};

Relay Runtime

Relay Runtime is the core part of Relay. It handles how Relay will do the requests (network layer), it will says how Relay will store the data. It also handles mutations and subscriptions.

If you wanna port Relay to angular or vue, you just take the Relay Runtime and add your favorite framework on top of it.

React Relay

It is the React bindings for Relay Runtime.
It evolved a lot since Relay Classic, to Relay Modern, and now Relay hooks with support to Suspense and render as you fetch.

Relay hooks provides the best DX. useFragment let you declare what data your components needs, and Relay will figure it out how to bring this data to that component, from the store? from the network? you don't need to care about it.

useMutation will execute GraphQL Mutations and will also ensure you don't double execute them, so you don't need to worry when an user clicks the form button twice or more.

Partial Rendering

One of the Relay unique feature is to partial render your components based on existing data in your store.

<>
  <PostTitle post={post} />
  <Suspense>
     <PostComments post={post} />
  </Suspense>
</>

Imagine that you already have post.title in your Relay store, but you don't have post.comments.
Relay will be able to render <PostTitle /> component, and it will suspend <PostComments /> until it gets the post comments. This provides a faster first render experience, and better UX for our users.

Relay at Backend

relay-at-backend

We also use Relay at Backend.

We use Relay Compiler to compile and generate types for queries/mutations/subscriptions of our tests in the backend. This workflow provides typesafe testing and a better DX and asserting resulting of GraphQL tests.

Here is some code showing how to use it:

const graphql = (strings: TemplateStringsArray) => {
  if (strings?.schema) {
    throw new Error('use graphqlExecute');
  }

  return strings[0];
};

export const graphqlExecute = async <T extends OperationType>(
  args: GraphQLArgs<T['variables']>,
) => {
  const result = await graphql(args);

  return result as unknown as ExecutionResult<T['response']>;
};

const source = graphql`
  query AppQuery($id: ID) {
    user: node(id: $id) {
      ... on User {
        name
     }
   }
  } 
`;

const result = await graphqlExecute<AppQuery>({
    schema,
    source,
    rootValue,
    contextValue,
    variableValues,
  });

AppQuery type is generated by Relay Compiler, and result has the correct type of it, if you change the query, it will change the result type. It is a great DX.

More Relay at Woovi

We are using more and more Relay at Woovi. Relay let us decouple our components. It lets us easily refactor without breaking anything. Relay Compiler in rust is faster than ever.

In Conclusion

My first contribution to Relay was December 15th, 2015, check it here https://github.com/facebookarchive/relay-starter-kit/commits?author=sibelius.

Since there, GraphQL and Relay evolved a lot. Relay has a step learning curve, because it requires you to do the right thing, not the easiest thing. Relay requires a new mental model of how to deal with data in components.

We are going to keep using more Relay at Woovi to help us scale.

Relay Workshop

If you want to learn Relay, the best resource is Relay Workshop. It has 12 practical exercises to learn the most used Relay features.

Woovi
Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are hiring!

...



๐Ÿ“Œ How Woovi uses Relay?


๐Ÿ“ˆ 55.06 Punkte

๐Ÿ“Œ Synology NAS uses unsecure remote access by default AND it uses a relay server to get there.


๐Ÿ“ˆ 35.32 Punkte

๐Ÿ“Œ Woovi Rotation: Mini Talks


๐Ÿ“ˆ 29.38 Punkte

๐Ÿ“Œ How Woovi Handles Pair Programming


๐Ÿ“ˆ 29.38 Punkte

๐Ÿ“Œ Woovi's Customer Success Team: Providing Seamless Support to Customers


๐Ÿ“ˆ 29.38 Punkte

๐Ÿ“Œ How Woovi handles complex date generation with Javascript


๐Ÿ“ˆ 29.38 Punkte

๐Ÿ“Œ Why Woovi bet on JavaScript?


๐Ÿ“ˆ 29.38 Punkte

๐Ÿ“Œ Woovi Bets on JavaScript, Should You?


๐Ÿ“ˆ 29.38 Punkte

๐Ÿ“Œ Cobalt Mirage Affiliate Uses GitHub to Relay Drokbk Malware Instructions


๐Ÿ“ˆ 25.68 Punkte

๐Ÿ“Œ MalHide Malware uses the compromised system as an eMail relay


๐Ÿ“ˆ 25.68 Punkte

๐Ÿ“Œ Newly Found Malware Uses 7 NSA Hacking Tools, Where WannaCry Uses 2


๐Ÿ“ˆ 19.27 Punkte

๐Ÿ“Œ I'm receiving spam SMSs that uses the same number Microsoft/Google and other trustable services uses


๐Ÿ“ˆ 19.27 Punkte

๐Ÿ“Œ Bugtraq: Cisco Security Advisory: Cisco Adaptive Security Appliance Software DHCPv6 Relay Denial of Service Vulnerability


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Bugtraq: [RT-SA-2016-005] Unauthenticated File Upload in Relay Ajax Directory Manager may Lead to Remote Command Execution


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Relay Ajax Directory Manager 1.5.3 File Upload / Command Execution


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ [webapps] - Relay Ajax Directory Manager relayb01-071706, 1.5.1, 1.5.3 - Unauthenticated File Upload


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Box Relay lรครŸt Anwender Arbeitsablรคufe gestalten


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Bugtraq: Cisco Security Advisory: Cisco Adaptive Security Appliance Software DHCPv6 Relay Denial of Service Vulnerability


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Bugtraq: [RT-SA-2016-005] Unauthenticated File Upload in Relay Ajax Directory Manager may Lead to Remote Command Execution


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Relay Ajax Directory Manager 1.5.3 File Upload / Command Execution


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ [webapps] - Relay Ajax Directory Manager relayb01-071706, 1.5.1, 1.5.3 - Unauthenticated File Upload


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Box Relay lรครŸt Anwender Arbeitsablรคufe gestalten


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ f8: Facebook schreibt React neu, aktualisiert Relay und stellt UI-Framework fรผr Android vor


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Microsoft Addresses NTLM Bugs That Facilitate Credential Relay Attacks


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Brazilians waxed: Uni's Tor relay node booted after harvesting .onions


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ DEF CON 25 Car Hacking Village - Weston Hecker - Grand Theft Radio Stopping SDR Relay Attacks


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ weMessage: iMessage auch auf Android รผber Relay-Server nutzen


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Vuln: General Electric D60 Line Distance Relay Multiple Buffer Overflow Vulnerabilities


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Cisco ASA 9.4.1 DHCPv6 Relay denial of service


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Trend Micro ServerProtect POST Request /TVCS/relay.dll memory corruption


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ DEF CON 26 HARDWARE HACKING VILLAGE - Salvador Mendoza - NFC Payments The Art of Relay & Replay


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Cisco IOS 15.1/15.2/15.3/15.4/15.5 DHCPv6 Relay Message Handler Reload Denial of Service


๐Ÿ“ˆ 16.04 Punkte

๐Ÿ“Œ Relay-Methode: Ordentliche Halter neuer Autos sind einfach zu beklauen


๐Ÿ“ˆ 16.04 Punkte











matomo