{"pageProps":{"preview":false,"currentGuide":{"title":"Using Tina With Strapi","steps":[{"title":"Overview","id":"/guides/nextjs/tina-with-strapi/overview","slug":"/guides/nextjs/tina-with-strapi/overview","data":"./overview.md"},{"title":"Setting up Strapi","id":"/guides/nextjs/tina-with-strapi/strapi-setup","slug":"/guides/nextjs/tina-with-strapi/strapi-setup","data":"./strapi-setup.md"},{"title":"Front-end Setup","id":"/guides/nextjs/tina-with-strapi/front-end-setup","slug":"/guides/nextjs/tina-with-strapi/front-end-setup","data":"./front-end-setup.md"},{"title":"Querying Strapi","id":"/guides/nextjs/tina-with-strapi/querying-strapi","slug":"/guides/nextjs/tina-with-strapi/querying-strapi","data":"./querying-strapi.md"},{"title":"Authenticating with Strapi","id":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","slug":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","data":"./authenticating-with-strapi.md"},{"title":"Editing with Tina","id":"/guides/nextjs/tina-with-strapi/editing-with-tina","slug":"/guides/nextjs/tina-with-strapi/editing-with-tina","data":"./editing-with-tina.md"},{"title":"Saving to Strapi","id":"/guides/nextjs/tina-with-strapi/saving-to-strapi","slug":"/guides/nextjs/tina-with-strapi/saving-to-strapi","data":"./saving-to-strapi.md"}]},"guideMeta":{"fileRelativePath":"content/guides/nextjs/tina-with-strapi/meta.json","data":{"title":"Using Tina With Strapi","steps":[{"title":"Overview","id":"/guides/nextjs/tina-with-strapi/overview","slug":"/guides/nextjs/tina-with-strapi/overview","data":"./overview.md"},{"title":"Setting up Strapi","id":"/guides/nextjs/tina-with-strapi/strapi-setup","slug":"/guides/nextjs/tina-with-strapi/strapi-setup","data":"./strapi-setup.md"},{"title":"Front-end Setup","id":"/guides/nextjs/tina-with-strapi/front-end-setup","slug":"/guides/nextjs/tina-with-strapi/front-end-setup","data":"./front-end-setup.md"},{"title":"Querying Strapi","id":"/guides/nextjs/tina-with-strapi/querying-strapi","slug":"/guides/nextjs/tina-with-strapi/querying-strapi","data":"./querying-strapi.md"},{"title":"Authenticating with Strapi","id":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","slug":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","data":"./authenticating-with-strapi.md"},{"title":"Editing with Tina","id":"/guides/nextjs/tina-with-strapi/editing-with-tina","slug":"/guides/nextjs/tina-with-strapi/editing-with-tina","data":"./editing-with-tina.md"},{"title":"Saving to Strapi","id":"/guides/nextjs/tina-with-strapi/saving-to-strapi","slug":"/guides/nextjs/tina-with-strapi/saving-to-strapi","data":"./saving-to-strapi.md"}]}},"markdownFile":{"fileRelativePath":"content/guides/nextjs/tina-with-strapi/querying-strapi.md","data":{"frontmatter":{"title":"Querying Strapi"},"excerpt":" We're ready to start pulling the data from Strapi instead of the filesystem. To do this we'll be writing GraphQL queries and sending them to Strapi in our getStaticProps methods. Adjusting Strapi&hellip;","markdownBody":"\nWe're ready to start pulling the data from Strapi instead of the filesystem. To do this we'll be writing GraphQL queries and sending them to Strapi in our `getStaticProps` methods.\n\n## Adjusting Strapi permissions\n\nBy default, you won't be able to access any data from Strapi without authentication. For our purposes, let's give unauthenticated users read access to our two content types.\n\nHead back to Strapi and click on [**Roles & Permissions**](http://localhost:1337/admin/plugins/users-permissions/roles) in the sidebar. Click into the **Public** role. On this page, we can adjust our permissions for the **Author** and **Blog Post** types. Give the public access to **count**, **find**, and **findone** then click the **Save** button..\n\n![Public permission configuration](/img/strapi-guide/public_permissions.png)\n\n## Get index page data\n\nNow that we have permissions let's modify `getStaticProps` to query the GraphQL endpoint.\n\n**pages/index.js**\n\n```js\nimport { fetchGraphql } from 'react-tinacms-strapi'\n\n//...\n\nexport async function getStaticProps() {\n  const postResults = await fetchGraphql(\n    process.env.STRAPI_URL,\n    `\n    query{\n      blogPosts {\n        title\n        date\n        slug\n        author {\n          name\n          picture { \n            url\n          }\n        }\n        excerpt\n        coverImage {\n          url\n        }\n      }\n    }\n  `\n  )\n\n  return {\n    props: { allPosts: postResults.data.blogPosts },\n  }\n}\n```\n\nWe're no longer using the `getAllPosts` function that the starter provided for us. So we can remove the import.\n\n```diff\n- import { getAllPosts } from '../lib/api'\n```\n\nEach of the items that I'm querying is used to preview a blog post on the homepage. This _almost_ works how we want it to, but there is one exception in how we need to deal with images.\n\nIn the Next.js example, images are hosted locally, and the `coverImage` field is a _string_ that points to the relative location of the picture. In our Strapi example, `coverImage` is an _object_ with a `url` property. Additionally, the API only returns a relative location, so we need to add on the URL of our Strapi server to fully resolve our images.\n\n**pages/index.js**\n\n```diff\n<HeroPost\n    title={heroPost.title}\n-   coverImage={heroPost.coverImage}\n+   coverImage={process.env.STRAPI_URL + heroPost.coverImage.url}\n    date={heroPost.date}\n    author={heroPost.author}\n    slug={heroPost.slug}\n    excerpt={heroPost.excerpt}\n/>\n```\n\n**components/hero-post.js**\n\n```diff\n<div>\n  <p className=\"text-lg leading-relaxed mb-4\">{excerpt}</p>\n  <Avatar\n    name={author.name}\n-   picture={author.picture}\n+   picture={process.env.STRAPI_URL + author.picture.url}\n  />\n</div>\n```\n\n**components/more-stories.js**\n\n```diff\n{posts.map((post) => (\n  <PostPreview\n    key={post.slug}\n    title={post.title}\n-   coverImage={post.coverImage}\n+   coverImage={process.env.STRAPI_URL + post.coverImage.url}\n    date={post.date}\n    author={post.author}\n    slug={post.slug}\n    excerpt={post.excerpt}\n  />\n}\n```\n\n**components/post-preview.js**\n\n```diff\n<Avatar\nname={author.name}\n- picture={author.picture}\n+ picture={process.env.STRAPI_URL + author.picture.url}\n/>\n```\n\nRefresh the index page and see the blog posts you created in Strapi!\n\n![New index page with data from Strapi](/img/strapi-guide/updated_index.png)\n\nIf you try to navigate to any blog post, you'll be met with a 404. Head over to `pages/posts/[slug].js` and we'll get the blog post pages working.\n\n## Pull blog posts from Strapi\n\nWe'll be making changes to `getStaticProps` to load the contents of the blog post that we're trying to view. We'll also make changes to `getStaticPaths` so that when we click on a blog post we are able to resolve it based on the `slug`.\n\n**pages/posts/\\[slug\\].js**\n\n```js\nimport { fetchGraphql } from 'react-tinacms-strapi'\n// ...\nexport async function getStaticProps({ params }) {\n  const postResults = await fetchGraphql(\n    process.env.STRAPI_URL,\n    `\n    query{\n      blogPosts(where: {slug: \"${params.slug}\"}){\n        id\n        title\n        date\n        slug\n        content\n        author {\n          name\n          picture { \n            url\n          }\n        }\n        coverImage {\n          url\n        }\n      }\n    }\n  `\n  )\n  const post = postResults.data.blogPosts[0]\n  const content = await markdownToHtml(post.content || '')\n\n  return {\n    props: {\n      post: {\n        ...post,\n        content,\n      },\n    },\n  }\n}\n\nexport async function getStaticPaths() {\n  const postResults = await fetchGraphql(\n    process.env.STRAPI_URL,\n    `\n    query{\n      blogPosts{\n        slug\n      }\n    }\n  `\n  )\n\n  return {\n    paths: postResults.data.blogPosts.map(post => {\n      return {\n        params: {\n          slug: post.slug,\n        },\n      }\n    }),\n    fallback: false,\n  }\n}\n```\n\nAgain, remove the unneeded functions that the starter gave us.\n\n```diff\n- import { getAllPosts, getPostBySlug } from \"../../lib/api\";\n```\n\nThere are a few more image paths we'll need to update if we expect things to work after making this change.\n\n**pages/posts/\\[slug\\].js**\n\n```diff\n  <Head>\n    <title>\n      {post.title} | Next.js Blog Example with {CMS_NAME}\n    </title>\n-    <meta property=\"og:image\" content={post.ogImage.url} />\n+    <meta property=\"og:image\" content={process.env.STRAPI_URL + post.coverImage.url} />\n  </Head>\n  <PostHeader\n    title={post.title}\n-   coverImage={post.coverImage}\n+   coverImage={process.env.STRAPI_URL + post.coverImage.url}\n    date={post.date}\n    author={post.author}\n  />\n```\n\n**components/post-header.js**\n\n```diff\n  <div className=\"hidden md:block md:mb-12\">\n-    <Avatar name={author.name} picture={author.picture} />\n+    <Avatar name={author.name} picture={process.env.STRAPI_URL + author.picture.url} />\n  </div>\n  <div className=\"mb-8 md:mb-16 -mx-5 sm:mx-0\">\n    <CoverImage title={title} src={coverImage} />\n  </div>\n  <div className=\"max-w-2xl mx-auto\">\n    <div className=\"block md:hidden mb-6\">\n-    <Avatar name={author.name} picture={author.picture} />\n+    <Avatar name={author.name} picture={process.env.STRAPI_URL + author.picture.url} />\n    </div>\n    <div className=\"mb-6 text-lg\">\n      <DateFormater dateString={date} />\n    </div>\n  </div>\n```\n\nWe should now be able to load our Strapi blog posts based on their `slug`. Trying refreshing your site and click around to make sure everything is working.\n\n![A working blog post page](/img/strapi-guide/working_blog_post.jpg)\n\nNext, we'll be adding Tina's _slick_ editing experience to our blog posts.\n"}},"allGuides":[{"weight":300,"id":"gatsby","title":"Gatsby","collapsible":false,"items":[{"id":"adding-tina","title":"Adding Tina to a Gatsby Site","slug":"/guides/gatsby/adding-tina/project-setup"},{"id":"git","title":"Using a Git Backend with Gatsby","slug":"/guides/gatsby/git/installation"}]},{"weight":100,"id":"general","title":"General","collapsible":false,"items":[{"id":"inline-blocks","title":"Working with Inline Blocks","slug":"/guides/general/inline-blocks/overview"}]},{"weight":200,"id":"nextjs","title":"Next.js","collapsible":false,"items":[{"id":"adding-tina","title":"Adding Tina to a Next.js Site","slug":"/guides/nextjs/adding-tina/overview"},{"id":"git","title":"Using a Git Backend with Next.js","slug":"/guides/nextjs/git/getting-started"},{"id":"github","title":"Using GitHub with Next.js","slug":"/guides/nextjs/github/initial-setup"},{"id":"tina-with-strapi","title":"Using Tina With Strapi","slug":"/guides/nextjs/tina-with-strapi/overview"}]}],"tocItems":"- [Adjusting Strapi permissions](#adjusting-strapi-permissions)\n- [Get index page data](#get-index-page-data)\n- [Pull blog posts from Strapi](#pull-blog-posts-from-strapi)"},"__N_SSG":true}