AugustoCalaca

export const initEnvironment = (records = {}) => {
  const network = Network.create(cacheHandler);

  const source = new RecordSource(records);
  const store = new Store(source, {
    // This property tells Relay to not immediately clear its cache when the user
    // navigates around the app. Relay will hold onto the specified number of
    // query results, allowing the user to return to recently visited pages
    // and reusing cached data if its available/fresh.
    gcReleaseBufferSize: 10,

AugustoCalaca

import React from 'react';
import { NextPage } from 'next';
import { DocumentContext } from 'next/document';
import { RelayEnvironmentProvider, fetchQuery } from 'react-relay/hooks';
import { GraphQLTaggedNode, Variables } from 'relay-runtime';

import { initEnvironment } from './createEnvironment';

type OptionsWithData = {
  query: GraphQLTaggedNode;

AugustoCalaca

import React from 'react';
import { ServerStyleSheet } from 'styled-components';
import { ServerStyleSheets } from '@material-ui/core/styles';
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(context) {
    const styledComponentsSheet = new ServerStyleSheet();
    const materialSheets = new ServerStyleSheets();
    const originalRenderPage = context.renderPage;

AugustoCalaca

const path = require('path');

const webpack = require('webpack');

const WebpackNodeExternals = require('webpack-node-externals');
const ReloadServerPlugin = require('reload-server-webpack-plugin');

const cwd = process.cwd();

module.exports = {

AugustoCalaca

import React, { useRef, useState } from 'react';

import { Typography } from '@material-ui/core';
import TextField from '@material-ui/core/TextField';
import CircularProgress from '@material-ui/core/CircularProgress';
import Autocomplete, {
  AutocompleteChangeDetails,
  AutocompleteChangeReason,
  AutocompleteProps
} from '@material-ui/lab/Autocomplete';

AugustoCalaca

https://www.sitehosting.com.br/streaming-de-video-ao-vivo/
https://www.mediastream.com.br/

https://colorwhistle.com/live-stream-video-on-website/

https://habr.com/ru/post/453374/

https://www.twilio.com/voice/conference

https://whereby.com/

AugustoCalaca

About Fragment

• Fragment is the building block of the relay
• Fragment is a selection of fields on a GraphQL Type
• Fragment allow you to colocate data
• Relay composes fragments from multiple components into optimized and efficient batches to reduce round-trips to the server
• Its hard to over-fetch and under-fetch
• Components can only access data they've asked for - data mask - each one must declare its own data requirements without relying on others
• Components only re-render when the exact data they're using is updated, preventing unnecessary re-renders
• In short, colocating data make your components modular, easier to refactor, more performant and less error-prone

AugustoCalaca

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

import EditorField from './EditorField';

type InitialValuesFormikType = {
  editor: string;

AugustoCalaca

const base64ToPDF = (base64) => {
  const byteString = window.atob(base64);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const int8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i += 1) {
    int8Array[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([int8Array], { type: 'application/pdf' });
  const pdfURL = URL.createObjectURL(blob);

AugustoCalaca

module.exports = {
  presets: [
    '@babel/preset-react',
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },