reactjs - descargar - En Relay, ¿qué papel juegan la interfaz de nodo y la especificación de ID global?

relay modern

Question

Comencé con el relay-starter-kit y también trabajé en la documentación de Relay y GraphQL. Pero hay bastantes áreas que son inexplicables y misteriosas.

En serio, leí muchas documentaciones en todas partes sobre todas estas cosas, pero no pude encontrar ninguna explicación satisfactoria para las siguientes preguntas:

¿Para qué es esto? Puse el registro pero nunca se llama en absoluto:

var {nodeInterface, nodeField} = nodeDefinitions(
  (globalId) => {
    var {type, id} = fromGlobalId(globalId);
    if (type === ''User'') {
      return getUser(id);
    } else if (type === ''Widget'') {
      return getWidget(id);
    } else {
      return null;
    }
  },
  (obj) => {
    if (obj instanceof User) {
      return userType;
    } else if (obj instanceof Widget) {
      return widgetType;
    } else {
      return null;
    }
  }
);

Y cuál es el efecto real de esto:

interfaces: [nodeInterface],

Quizás relacionado con eso, ¿qué hace el campo de node aquí:

var queryType = new GraphQLObjectType({
  name: ''Query'',
  fields: () => ({
    node: nodeField,
    // Add your own root fields here
    viewer: {
      type: userType,
      resolve: () => getViewer(),
    },
  }),
});

¿Y cuál es la magia alrededor del campo de id ? ¿ globalIdField qué sirve globalIdField ?

Tengo una id en mi base de datos y pensé que podría usarla en mis objetos GraphQL:

En lugar de:

id: globalIdField(''User''),

Quiero usar mi id de base de datos:

id: {
  type: GraphQLID,
  description: ''The identifier''
},

Pero si hago eso, RelayQueryWriter: Could not find a type name for record ''1'' un error en el navegador que dice RelayQueryWriter: Could not find a type name for record ''1'' .

Puedo deshacerme de ese error agregando __typename a la consulta de retransmisión de mis contenedores de componentes, pero parece que todo está mal.

Sería genial si pudieras dar algunos detalles más profundos y una mejor explicación aquí y mejorar la documentación oficial.

Gracias

Answer 1

El campo raíz Node , en combinación con IDs únicos a nivel mundial, entra en juego cuando Relay necesita recuperar un objeto. La recuperación se produce cuando llama a this.props.relay.forceFetch() o cuando agrega campos a la consulta para un objeto cuyo ID global se conoce porque ya se ha recuperado parcialmente.

En casos como estos, Relay hará un corto circuito en la consulta regular y ejecutará una consulta para los objetos directamente usando su ID global y la llamada raíz del node .

Ejemplo :

Suponga que $showComments era false cuando esta consulta se resolvió por primera vez.

query {
  viewer {
    stories(first: 10) {
      edges {
        node {
          id,
          comments(first: 10) @include(if: $showComments) { 
            author, 
            commentText 
          }
          text,
        }
      }
    }
  }
}

Esto habrá provocado una búsqueda de id y text para algunas historias, cuyas identificaciones ahora se conocen.

Imagine que en algún momento futuro, la variable $showComments hizo true . La retransmisión volverá a capturar solo los datos que necesita utilizando el campo raíz del node .

query {
  node(id: "ABC123") { 
    fragment on Story { comments(first: 10) { author, commentText } }
  }
  node(id: "DEF456") { 
    fragment on Story { comments(first: 10) { author, commentText } }
  }
  node(id: "GHI789") { 
    fragment on Story { comments(first: 10) { author, commentText } }
  }
  ...
}

Esto depende de algunas piezas:

1. Cada objeto debe tener una ID globalmente única o estar identificado por un par de tipo / ID (el asistente globalIdField hace y produce una cadena codificada en base64).
2. El servidor debe saber cómo resolver un objeto a partir de una ID única global y viceversa. Para esto son las nodeDefinitions .
3. Cualquier objeto que espera ser recuperable usando este sistema debe implementar el nodeInterface .

Ver también: https://facebook.github.io/relay/docs/graphql-object-identification.html#content