Fetch data from rest does not initialized data supbprop

[Simply007]

Hello, I have tried to fetch some data from REST end point:
deliver.kenticocloud.com/975bf280-fd91-488c-994c-2f04416e5ee3/items/

I was able to set up the query and fetch the data (seeing the request when sniffing network):
https://github.com/Simply007/apollo-link-rest/tree/master/examples/apollo2

But when I am about to render the actual content, I do not have initialized the data:
https://github.com/Simply007/apollo-link-rest/blob/master/examples/apollo2/src/Components/Article.js#L26

Do you have an hint how to fix that.

I am also getting an error in console:

writeToStore.js:111 Missing field __typename in {
  "item": {
    "system": {
      "id": "117cdfae-52cf-4885-b271-66aef6825612",
      "name": "Cof

To run the example, just go the /examples/apollo2 and run:
npm install
npm run

Example is based on create-react-app script.

[fbartho]

Hi @Simply007! I took a look at your API and example app. And I think you're missing a couple details in there.

You probably want to pass type: "MyType" to your @rest() directive call!

Because you have a deeply nested object structure, you may also want to take a look at typePatcher

apollo-link-rest/src/restLink.ts

Lines 91 to 98 in 75df172

	/**
	* Structure to allow you to specify the __typename when you have nested objects in your REST response!
	*
	* @warning: We're not thrilled with this API, and would love a better alternative before we get to 1.0.0
	* Please see proposals considered in https://github.com/apollographql/apollo-link-rest/issues/48
	* And consider submitting alternate solutions to the problem!
	*/
	typePatcher?: TypePatcherTable;

Cheers!

[Simply007]

OK, if i get it right, you need to specify the format of the data you get from the rest.

To do that, it is required to set up TypePatcherTable to know the type "MyType" and then to the rest definition set this type.

Do you have any example, how to define the type using TypePatcherTable? Ideally with the type nesting.

[fbartho]

Look for typePatcher in tests/restLink.ts, we have a complex nested example in there.

(I’m on my phone or I would give you a deep link to there, sorry!)

[fbartho]

apollo-link-rest/src/__tests__/restLink.ts

Lines 377 to 559 in 76a0e47

	it('can configure typename by providing a custom type-patcher table', async () => {
	expect.assertions(1);
	const patchIfExists = (
	data: any,
	key: string,
	__typename: string,
	patcher: RestLink.FunctionalTypePatcher,
	) => {
	const value = data[key];
	if (value == null) {
	return {};
	}
	const result = { [key]: patcher(value, __typename, patcher) };
	return result;
	};
	const typePatcher: RestLink.TypePatcherTable = {
	Outer: (
	obj: any,
	outerType: string,
	patchDeeper: RestLink.FunctionalTypePatcher,
	) => {
	if (obj == null) {
	return obj;
	}
	return {
	...obj,
	...patchIfExists(obj, 'inner1', 'Inner1', patchDeeper),
	...patchIfExists(
	obj,
	'simpleDoubleNesting',
	'SimpleDoubleNesting',
	patchDeeper,
	),
	...patchIfExists(obj, 'nestedArrays', 'NestedArrays', patchDeeper),
	};
	},
	Inner1: (
	obj: any,
	outerType: string,
	patchDeeper: RestLink.FunctionalTypePatcher,
	) => {
	if (obj == null) {
	return obj;
	}
	return {
	...obj,
	...patchIfExists(obj, 'reused', 'Reused', patchDeeper),
	};
	},
	SimpleDoubleNesting: (
	obj: any,
	outerType: string,
	patchDeeper: RestLink.FunctionalTypePatcher,
	) => {
	if (obj == null) {
	return obj;
	}
	return {
	...obj,
	...patchIfExists(obj, 'inner1', 'Inner1', patchDeeper),
	};
	},
	NestedArrays: (
	obj: any,
	outerType: string,
	patchDeeper: RestLink.FunctionalTypePatcher,
	) => {
	if (obj == null) {
	return obj;
	}
	return {
	...obj,
	...patchIfExists(
	obj,
	'singlyArray',
	'SinglyNestedArrayEntry',
	patchDeeper,
	),
	...patchIfExists(
	obj,
	'doublyNestedArray',
	'DoublyNestedArrayEntry',
	patchDeeper,
	),
	};
	},
	};
	const link = new RestLink({ uri: '/api', typePatcher });
	const root = {
	id: '1',
	inner1: { data: 'outer.inner1', reused: { id: 1 } },
	simpleDoubleNesting: {
	data: 'dd',
	inner1: { data: 'outer.SDN.inner1', reused: { id: 2 } },
	},
	nestedArrays: {
	unrelatedArray: ['string', 10],
	singlyArray: [{ data: 'entry!' }],
	doublyNestedArray: [[{ data: 'inception.entry!' }]],
	},
	};
	const rootTyped = {
	__typename: 'Outer',
	id: '1',
	inner1: {
	__typename: 'Inner1',
	data: 'outer.inner1',
	reused: { __typename: 'Reused', id: 1 },
	},
	simpleDoubleNesting: {
	__typename: 'SimpleDoubleNesting',
	data: 'dd',
	inner1: {
	__typename: 'Inner1',
	data: 'outer.SDN.inner1',
	reused: { __typename: 'Reused', id: 2 },
	},
	},
	nestedArrays: {
	__typename: 'NestedArrays',
	unrelatedArray: ['string', 10],
	singlyArray: [{ __typename: 'SinglyNestedArrayEntry', data: 'entry!' }],
	doublyNestedArray: [
	[
	{
	__typename: 'DoublyNestedArrayEntry',
	data: 'inception.entry!',
	},
	],
	],
	},
	};
	fetchMock.get('/api/outer/1', root);
	const someQuery = gql`
	query someQuery {
	outer @rest(type: "Outer", path: "/outer/1") {
	id
	inner1 {
	data
	reused {
	id
	}
	}
	simpleDoubleNesting {
	data
	inner1 {
	data
	reused {
	id
	}
	}
	}
	nestedArrays {
	unrelatedArray
	singlyArray {
	data
	}
	doublyNestedArray {
	data
	}
	}
	}
	}
	`;
	const { data } = await makePromise<Result>(
	execute(link, {
	operationName: 'someOperation',
	query: someQuery,
	}),
	);
	expect(data).toMatchObject({
	outer: rootTyped,
	});
	});

@Simply007 -- this is a complex example showing all the different ways you could set up typePatcher

[Simply007]

Great, this is exactly what I need! :-)