From 402b71513091eaf770847d940d68ae6bf55c844f Mon Sep 17 00:00:00 2001 From: "gento.ogane" Date: Thu, 9 Nov 2023 19:02:24 +0900 Subject: [PATCH] [#11305]update client-schema-mocking doc --- docs/source/development-testing/client-schema-mocking.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/source/development-testing/client-schema-mocking.mdx b/docs/source/development-testing/client-schema-mocking.mdx index 0f8b98cf5b1..44c66b9fb04 100644 --- a/docs/source/development-testing/client-schema-mocking.mdx +++ b/docs/source/development-testing/client-schema-mocking.mdx @@ -26,7 +26,7 @@ Our client application can define a [client-side schema](../local-state/client-s This client-side schema extends the `Rocket` type to add a `description` field (make sure to name the variable `typeDefs` as shown): -```js title="index.js" +```jsx title="main.jsx" const typeDefs = gql` extend type Rocket { description: String @@ -36,7 +36,7 @@ const typeDefs = gql` We can then provide this schema to the `ApolloClient` constructor, like so: -```js {4} title="index.js" +```jsx {4} title="main.jsx" const client = new ApolloClient({ uri: 'http://localhost:4000/graphql', cache: new InMemoryCache(), @@ -50,7 +50,7 @@ Our client app doesn't yet know how to populate the `Rocket.description` field. Let's define our `read` function in the configuration object we provide to the `InMemoryCache` constructor: -```js {5-9} title="index.js" +```jsx {5-9} title="main.jsx" const cache = new InMemoryCache({ typePolicies: { Rocket: { @@ -68,7 +68,7 @@ const cache = new InMemoryCache({ This enables us to query the field, but we might not want to show the same boilerplate description for every rocket. To add variety to our mocked output, we can use a library like [faker.js](https://github.com/faker-js/faker): -```js title="index.js" +```jsx title="main.jsx" import { faker } from "@faker-js/faker"; // Returns 1 or 2 sentences of Lorem Ipsum