{"componentChunkName":"component---src-templates-post-js","path":"/setup-apollo-cache","result":{"data":{"markdownRemark":{"html":"

In this post we setup the Apollo cache and our local resolvers to be able to store the form data.

\n

First in your index.js file add the following:

\n
import { InMemoryCache } from \"apollo-cache-inmemory\"\n\nconst cache = new InMemoryCache()\n\ncache.writeData({\n  data: {\n    formData: {\n      date: \"\",\n      email: \"\",\n      customer: {},\n      __typename: \"formData\",\n    },\n  },\n})
\n

🍗 Here we are simply importing the InMemoryCache function and then making an instance of a cache object.

\n

🍗 Next we use the writeData function to create our initial formData object that has a date, email and customer fields to store that data.

\n

🍗 Very important is the __typename field the lets GraphQL know that the formData object is the type we will be querying and mutating

\n

Next up in src make a file called resolvers.js and add the following:

\n
import { GET_FORM_DATA } from \"./graphql/Queries\"\n\nexport const resolvers = {\n  Mutation: {\n    updateFormData: (parent, args, context, info) => {\n      const queryResult = context.cache.readQuery({ query: GET_FORM_DATA })\n      const { formData } = queryResult\n      if (queryResult) {\n        const data = {\n          formData: {\n            date: args.date,\n            email: args.email,\n            customer: args.customers,\n            __typename: formData[\"__typename\"],\n          },\n        }\n\n        context.cache.writeQuery({ query: GET_FORM_DATA, data })\n        return data.formData\n      }\n      return []\n    },\n  },\n}
\n

🍗 We have a resolvers object that has a mutation which has a function called updateFormData.

\n

🍗 updateFormData reads the cache to get the most update version of the formData

\n

🍗 Then it creates a new object that takes in new arguments to overwrite the form data with update data.

\n

🍗 formData is then returned.

\n

Next up go to the Queries.js file and add the following:

\n
export const GET_FORM_DATA = gql`\n  query GET_FORM_DATA {\n    formData @client {\n      date\n      email\n    }\n  }\n`
\n

We have to create a schema doc to read the formData the @client directive lets GraphQL know it is directly for the client only.

\n

In the mutations.js add the following:

\n
import gql from \"graphql-tag\"\n\nexport const UPDATE_FORM_DATA = gql`\n  mutation UPDATE_FORM_DATA(\n    $date: String\n    $email: String\n    $customer: CustomerInput\n  ) {\n    updateFormData(date: $date, email: $email, customer: $customer) @client\n  }\n`
\n

Here we are just creating a mutation to update the form data

\n

This is it for now, next up we will start with building out the forms.

","frontmatter":{"date":"July 21, 2020","path":"/setup-apollo-cache","title":"Setup Apollo Cache","postnumber":46}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-booking-forms-part-one","postnumber":47}}},"next":{"node":{"frontmatter":{"path":"/setting-up-advanced-forms","postnumber":45}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}