relay nextjs

Revere Cre нанимает! Заинтересованы в работе над передовым краем?
Обратитесь на [email protected] для получения дополнительной информации.

Реле + Next.js

Документация | Обсуждение | Последние выпуски

relay-nextjs -лучший способ использовать реле и next.js в том же проекте! Он поддерживает постепенную миграцию , готовится к выводу и управляет производством крупными компаниями.

Обзор

relay-nextjs Curps Components Page, запрос на график и некоторые вспомогательные методы для автоматического подключения данных с использованием реле. При начальной загрузке среда реле создается данные, полученные на стороне сервера, страница отображается, а в результате состояние сериализуется как тег скрипта. При загрузке в клиенте новые реле и предварительно загруженные запросы создаются с использованием этого сериализованного состояния. Данные получают с использованием среды реле на стороне клиента при последующих навигациях.

Примечание. На данный момент relay-nextjs не поддерживает маршрутизатор NextJS 13.

• Смотрите выпуск GitHub № 89 для получения дополнительной информации.

Начиная

Установите, используя NPM или другой любимый менеджер пакетов:

$ npm install relay-nextjs

relay-nextjs должны быть настроены в _app для правильного перехвата и обработки маршрутизации.

Настройка эстафетной среды

Для получения основной информации о эстафете, пожалуйста, смотрите Docs Relay.

relay-nextjs был разработан с учетом рендеринга на стороне на стороне клиента. Таким образом, он должен иметь возможность использовать либо клиентскую, либо серверную реле. Библиотека знает, как справиться с какой средой использовать, но мы должны сказать ей, как создать эти среды. Для этого мы будем определять две функции: getClientEnvironment и createServerEnvironment . Обратите внимание на различие-на клиенте только одна среда когда-либо создавалась, потому что есть только одно приложение, но на сервере мы должны создать среду для для Render, чтобы гарантировать, что кэш не совместно используется между запросами.

Сначала мы определим getClientEnvironment :

 // lib/client_environment.ts
import { Environment , Network , Store , RecordSource } from 'relay-runtime' ;

export function createClientNetwork ( ) {
  return Network . create ( async ( params , variables ) => {
    const response = await fetch ( '/api/graphql' , {
      method : 'POST' ,
      credentials : 'include' ,
      headers : {
        'Content-Type' : 'application/json' ,
      } ,
      body : JSON . stringify ( {
        query : params . text ,
        variables ,
      } ) ,
    } ) ;

    const json = await response . text ( ) ;
    return JSON . parse ( json ) ;
  } ) ;
}

let clientEnv : Environment | undefined ;
export function getClientEnvironment ( ) {
  if ( typeof window === 'undefined' ) return null ;

  if ( clientEnv == null ) {
    clientEnv = new Environment ( {
      network : createClientNetwork ( ) ,
      store : new Store ( new RecordSource ( ) ) ,
      isServer : false ,
    } ) ;
  }

  return clientEnv ;
}

а затем createServerEnvironment :

 import { graphql } from 'graphql' ;
import { GraphQLResponse , Network } from 'relay-runtime' ;
import { schema } from 'lib/schema' ;

export function createServerNetwork ( ) {
  return Network . create ( async ( text , variables ) => {
    const context = {
      token ,
      // More context variables here
    } ;

    const results = await graphql ( {
      schema ,
      source : text . text ! ,
      variableValues : variables ,
      contextValue : context ,
    } ) ;

    return JSON . parse ( JSON . stringify ( results ) ) as GraphQLResponse ;
  } ) ;
}

export function createServerEnvironment ( ) {
  return new Environment ( {
    network : createServerNetwork ( ) ,
    store : new Store ( new RecordSource ( ) ) ,
    isServer : true ,
  } ) ;
}

Примечание в примере серверной среды, которую мы выполняем против локальной схемы, но вы также можете получить от удаленного API.

Настройка _app

 // pages/_app.tsx
import { RelayEnvironmentProvider } from 'react-relay/hooks' ;
import { useRelayNextjs } from 'relay-nextjs/app' ;
import { getClientEnvironment } from '../lib/client_environment' ;

function MyApp ( { Component , pageProps } : AppProps ) {
  const { env , ... relayProps } = useRelayNextjs ( pageProps , {
    createClientEnvironment : ( ) => getClientSideEnvironment ( ) ! ,
  } ) ;

  return (
    < >
      < RelayEnvironmentProvider environment = { env } >
        < Component { ... pageProps } { ... relayProps } />
      </ RelayEnvironmentProvider >
    </ >
  ) ;
}

export default MyApp ; 

Использование на странице

 // src/pages/user/[uuid].tsx
import { withRelay , RelayProps } from 'relay-nextjs' ;
import { graphql , usePreloadedQuery } from 'react-relay/hooks' ;

// The $uuid variable is injected automatically from the route.
const ProfileQuery = graphql `
  query profile_ProfileQuery($uuid: ID!) {
    user(id: $uuid) {
      id
      firstName
      lastName
    }
  }
` ;

function UserProfile ( { preloadedQuery } : RelayProps < { } , profile_ProfileQuery > ) {
  const query = usePreloadedQuery ( ProfileQuery , preloadedQuery ) ;

  return (
    < div >
      Hello { query . user . firstName } { query . user . lastName }
    </ div >
  ) ;
}

function Loading ( ) {
  return < div > Loading... </ div > ;
}

export default withRelay ( UserProfile , UserProfileQuery , {
  // Fallback to render while the page is loading.
  // This property is optional.
  fallback : < Loading /> ,
  // Create a Relay environment on the client-side.
  // Note: This function must always return the same value.
  createClientEnvironment : ( ) => getClientEnvironment ( ) ! ,
  // variablesFromContext allows you to declare and customize variables for the graphql query.
  // by default variablesFromContext is ctx.query
  variablesFromContext : ( ctx : NextRouter | NextPageContext ) => ( { ... ctx . query , otherVariable : true } ) ,
  // Gets server side props for the page.
  serverSideProps : async ( ctx ) => {
    // This is an example of getting an auth token from the request context.
    // If you don't need to authenticate users this can be removed and return an
    // empty object instead.
    const { getTokenFromCtx } = await import ( 'lib/server/auth' ) ;
    const token = await getTokenFromCtx ( ctx ) ;
    if ( token == null ) {
      return {
        redirect : { destination : '/login' , permanent : false } ,
      } ;
    }

    return { token } ;
  } ,
  // Server-side props can be accessed as the second argument
  // to this function.
  createServerEnvironment : async (
    ctx ,
    // The object returned from serverSideProps. If you don't need a token
    // you can remove this argument.
    { token } : { token : string }
  ) => {
    const { createServerEnvironment } = await import ( 'lib/server_environment' ) ;
    return createServerEnvironment ( token ) ;
  } ,
} ) ;