relay nextjs

Revere Cre sedang merekrut! Tertarik bekerja di ujung tombak frontend?
Hubungi [email protected] untuk informasi lebih lanjut.

Relay + Next.js

Dokumentasi | Diskusi | Rilis terbaru

relay-nextjs adalah cara terbaik untuk menggunakan relay dan next.js dalam proyek yang sama! Ini mendukung migrasi tambahan , siap pakai , dan dijalankan dalam produksi oleh perusahaan -perusahaan besar.

Ringkasan

relay-nextjs membungkus komponen halaman, kueri graphql, dan beberapa metode helper untuk secara otomatis menghubungkan pengambilan data menggunakan relay. Pada beban awal lingkungan relai dibuat, data diambil sisi server, halaman diberikan, dan keadaan yang dihasilkan diserialisasi sebagai tag skrip. Pada boot di klien lingkungan relai baru dan kueri yang dimuat sebelumnya dibuat menggunakan keadaan serial itu. Data diambil menggunakan lingkungan relai sisi klien pada navigasi berikutnya.

Catatan: relay-nextjs tidak mendukung router aplikasi selanjutnya 13 saat ini.

• Lihat masalah GitHub #89 untuk info lebih lanjut.

Memulai

Instal menggunakan NPM atau manajer paket favorit Anda yang lain:

$ npm install relay-nextjs

relay-nextjs harus dikonfigurasi dalam _app untuk mencegat dan menangani perutean dengan benar.

Menyiapkan Lingkungan Relay

Untuk informasi dasar tentang lingkungan relai, silakan lihat dokumen relay.

relay-nextjs dirancang dengan rendering sisi klien dan sisi server dalam pikiran. Karena itu perlu dapat menggunakan lingkungan relai sisi klien atau sisi server. Perpustakaan tahu cara menangani lingkungan mana yang akan digunakan, tetapi kami harus mengatakannya cara membuat lingkungan ini. Untuk ini kami akan mendefinisikan dua fungsi: getClientEnvironment dan createServerEnvironment . Perhatikan perbedaannya-pada klien hanya satu lingkungan yang pernah dibuat karena hanya ada satu aplikasi, tetapi di server kita harus membuat lingkungan per-render untuk memastikan cache tidak dibagikan di antara permintaan.

Pertama kita akan mendefinisikan 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 ;
}

dan kemudian 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 ,
  } ) ;
}

Catatan dalam lingkungan server contoh yang kami jalankan terhadap skema lokal tetapi Anda dapat mengambil dari API jarak jauh juga.

Mengkonfigurasi _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 ; 

Penggunaan di halaman

 // 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 ) ;
  } ,
} ) ;