Merge pull request #251 from eduardolundgren/v8.0.0-relay-v15-require…

…d-support-issue

Highlight Issue: Todo example with Relay v15.0.0 and fix @required field

examples/relay-hook-example/todo/data/schema.graphql

@@ -39,38 +39,58 @@ type Mutation {
  addTodo(input: AddTodoInput!): AddTodoPayload
  changeTodoStatus(input: ChangeTodoStatusInput!): ChangeTodoStatusPayload
  markAllTodos(input: MarkAllTodosInput!): MarkAllTodosPayload
- removeCompletedTodos(input: RemoveCompletedTodosInput!): RemoveCompletedTodosPayload
+ removeCompletedTodos(
+ input: RemoveCompletedTodosInput!
+ ): RemoveCompletedTodosPayload
  removeTodo(input: RemoveTodoInput!): RemoveTodoPayload
  renameTodo(input: RenameTodoInput!): RenameTodoPayload
 }
 
-"""An object with an ID"""
+"""
+An object with an ID
+"""
 interface Node {
- """The id of the object."""
+ """
+ The id of the object.
+ """
  id: ID!
 }
 
-"""Information about pagination in a connection."""
+"""
+Information about pagination in a connection.
+"""
 type PageInfo {
- """When paginating forwards, are there more items?"""
+ """
+ When paginating forwards, are there more items?
+ """
  hasNextPage: Boolean!
 
- """When paginating backwards, are there more items?"""
+ """
+ When paginating backwards, are there more items?
+ """
  hasPreviousPage: Boolean!
 
- """When paginating backwards, the cursor to continue."""
+ """
+ When paginating backwards, the cursor to continue.
+ """
  startCursor: String
 
- """When paginating forwards, the cursor to continue."""
+ """
+ When paginating forwards, the cursor to continue.
+ """
  endCursor: String
 }
 
 type Query {
  user(id: String): User
 
- """Fetches an object given its ID"""
+ """
+ Fetches an object given its ID
+ """
  node(
- """The ID of an object"""
+ """
+ The ID of an object
+ """
  id: ID!
  ): Node
 }
@@ -110,35 +130,57 @@ type RenameTodoPayload {
 }
 
 type Todo implements Node {
- """The ID of an object"""
+ """
+ The ID of an object
+ """
  id: ID!
- text: String!
+ text: String
  complete: Boolean!
 }
 
-"""A connection to a list of items."""
+"""
+A connection to a list of items.
+"""
 type TodoConnection {
- """Information to aid in pagination."""
+ """
+ Information to aid in pagination.
+ """
  pageInfo: PageInfo!
 
- """A list of edges."""
+ """
+ A list of edges.
+ """
  edges: [TodoEdge]
 }
 
-"""An edge in a connection."""
+"""
+An edge in a connection.
+"""
 type TodoEdge {
- """The item at the end of the edge"""
+ """
+ The item at the end of the edge
+ """
  node: Todo
 
- """A cursor for use in pagination"""
+ """
+ A cursor for use in pagination
+ """
  cursor: String!
 }
 
 type User implements Node {
- """The ID of an object"""
+ """
+ The ID of an object
+ """
  id: ID!
  userId: String!
- todos(status: String = "any", after: String, first: Int, before: String, last: Int): TodoConnection
+ todos(
+ status: String = "any"
+ after: String
+ first: Int
+ before: String
+ last: Int
+ ): TodoConnection
  totalCount: Int!
  completedCount: Int!
 }

examples/relay-hook-example/todo/data/schema/nodes.js

@@ -64,8 +64,8 @@ const GraphQLTodo = new GraphQLObjectType({
  fields: {
  id: globalIdField('Todo'),
  text: {
- type: new GraphQLNonNull(GraphQLString),
- resolve: (todo: Todo): string => todo.text,
+ type: GraphQLString,
+ resolve: (todo: Todo): string => null,
  },
  complete: {
  type: new GraphQLNonNull(GraphQLBoolean),

examples/relay-hook-example/todo/js/app.js

@@ -83,10 +83,17 @@ function fetchQuery(
  sink.next(data);
  sink.complete();
  });
- })
+ });
 }
 
+const requiredFieldLogger = (fieldPath, fieldName) => {
+ console.error(
+ `Required field "${fieldName}" is null at path "${fieldPath}".`,
+ );
+};
+
 const modernEnvironment: Environment = new Environment({
+ requiredFieldLogger,
  network: Network.create(fetchQuery),
  store: new Store(new RecordSource()),
 });

examples/relay-hook-example/todo/js/components/Todo.js

@@ -39,7 +39,7 @@ const fragmentSpecTodo = graphql`
  fragment Todo_todo on Todo {
  complete
  id
- text
+ text @required(action: THROW)
  }
 `;
 const fragmentSpecUser = graphql`
@@ -54,8 +54,8 @@ const fragmentSpecUser = graphql`
 const Todo = props => {
  const user = useFragment(fragmentSpecUser, props.user);
  console.log('props.todo', props.todo);
- //const todo = useFragment(fragmentSpecTodo, props.todo);
- const {todo} = props;
+ const todo = useFragment(fragmentSpecTodo, props.todo);
+ //const {todo} = props;
  const [isEditing, setIsEditing] = useState<boolean>(false);
 
  const [mutateChange] = useMutation(mutationChange);

examples/relay-hook-example/todo/js/components/TodoList.js

@@ -51,9 +51,7 @@ const fragmentSpec = graphql`
 const fragmentSpecList = graphql`
  fragment TodoList_edges on TodoEdge @relay(plural: true) {
  node {
- complete
- id
- text
+ ...Todo_todo
  }
  }
 `;

examples/relay-hook-example/todo/package.json

@@ -2,7 +2,7 @@
  "private": true,
  "scripts": {
  "start": "babel-node ./server.js",
- "build": "relay-compiler --src ./js/ --schema ./data/schema.graphql --artifactDirectory ./__generated__/relay",
+ "build": "relay-compiler",
  "flow-typed": "flow-typed install --flowVersion=0.94.0",
  "update-schema": "babel-node ./scripts/updateSchema.js",
  "lint": "eslint ./ --cache"
@@ -16,7 +16,7 @@
  "prop-types": "^15.7.2",
  "react": "^16.12.0",
  "react-dom": "^16.8.4",
- "relay-runtime": "12.0.0",
+ "relay-runtime": "15.0.0",
  "relay-hooks": "6.0.0",
  "whatwg-fetch": "3.0.0",
  "isomorphic-fetch": "2.2.1",
@@ -47,7 +47,7 @@
  "flow-bin": "^0.94.0",
  "flow-typed": "^2.5.1",
  "prettier": "^1.16.4",
- "relay-compiler": "12.0.0",
+ "relay-compiler": "15.0.0",
  "webpack": "^5.56.1",
  "webpack-dev-server": "^3.2.1"
  },
@@ -56,5 +56,11 @@
  "trailingComma": "all",
  "bracketSpacing": false,
  "jsxBracketSameLine": true
+ },
+ "relay": {
+ "src": "./js/",
+ "schema": "./data/schema.graphql",
+ "artifactDirectory": "./__generated__/relay",
+ "language": "javascript"
  }
 }

package.json

@@ -52,7 +52,7 @@
  },
  "peerDependencies": {
  "react": "^16.9.0 || ^17 || ^18",
- "relay-runtime": "^13.0.2 || ^14.0.0 || ^15.0.0"
+ "relay-runtime": "^13.2.0 || ^14.0.0 || ^15.0.0"
  },
  "devDependencies": {
  "babel-preset-fbjs": "^3.3.0",

src/FragmentResolver.ts

@@ -21,6 +21,7 @@ import {
  getPaginationVariables,
  getRefetchMetadata,
  getValueAtPath,
+ handlePotentialSnapshotErrors,
 } from 'relay-runtime';
 import { Fetcher, fetchResolver } from './FetchResolver';
 import { getConnectionState, getStateFromConnection } from './getConnectionState';
@@ -338,6 +339,10 @@ export class FragmentResolver {
  // useFragment
  this.result = data;
  }
+ const snap = this.resolverData.snapshot;
+ if (snap) {
+ this._throwOrLogErrorsInSnapshot(snap);
+ }
  this._subscribeResolve && this._subscribeResolve(this.result);
  }
 
@@ -621,4 +626,22 @@ export class FragmentResolver {
  this.refreshHooks();
  return disposable;
  };
+
+ _throwOrLogErrorsInSnapshot(snapshot: any) {
+ if (Array.isArray(snapshot)) {
+ snapshot.forEach((s) => {
+ if (s.missingRequiredFields) {
+ handlePotentialSnapshotErrors(this._environment, s.missingRequiredFields, s.relayResolverErrors);
+ }
+ });
+ } else {
+ if (snapshot.missingRequiredFields) {
+ handlePotentialSnapshotErrors(
+ this._environment,
+ snapshot.missingRequiredFields,
+ snapshot.relayResolverErrors,
+ );
+ }
+ }
+ }
 }

src/QueryFetcher.ts

@@ -8,6 +8,7 @@ import {
  OperationDescriptor,
  GraphQLTaggedNode,
  Variables,
+ handlePotentialSnapshotErrors,
 } from 'relay-runtime';
 import { Fetcher, fetchResolver } from './FetchResolver';
 import { FetchPolicy, RenderProps, QueryOptions, Options } from './RelayHooksTypes';
@@ -203,10 +204,18 @@ export class QueryFetcher<TOperationType extends OperationType = OperationType>
 
  resolveResult(): void {
  const { error, isLoading } = this.fetcher.getData();
+ const snapshot: any = this.snapshot;
+ if (snapshot && snapshot.missingRequiredFields) {
+ handlePotentialSnapshotErrors(
+ this.environment,
+ snapshot.missingRequiredFields,
+ snapshot.relayResolverErrors,
+ );
+ }
  this.result = {
  retry: this.retry,
  error,
- data: this.snapshot ? this.snapshot.data : null,
+ data: snapshot ? snapshot.data : null,
  isLoading,
  };
  }