Strapi - Build a blog using Strapi, React and Apollo

1

Our community is looking for talented writers who are passionate about our ecosystem (Jamstack, open-source, javascript) and willing to share their knowledge/experiences through our Write for the community program.

This is a companion discussion topic for the original entry at https://strapi.io/blog/build-a-blog-with-react-strapi-and-apollo
2 
you mean

cd frontend
yarn start

I think on creating backend, not mentioned when to install graphql

4

Hi!

  1. This code doesn’t return anything:
    <ReactMarkdown 
        source={articles.data[0].attributes.content}
    />

I managed to get the content by using 

    <ReactMarkdown 
        escapeHtml={false} 
        children={articles.data[0].attributes.content} 
    />

  1. The iframe is not converted to HTML code, as it is considered dangeroud HTML by React-Markdown.
    Do you have any idea how I can get the iframe as HTML tag from markdown?

  2. In the tutorial, you forgot to mention installing graphql on the backend:

    cd backend
    yarn add graphql
5

For issues 1, and 2, the solution is as follow:

in the terminal, add the rehype package typing

yarn add rehype-raw

Inside your Article/index.js import rehype:

import rehypeRaw from "rehype-raw"

Inside your function add it to Markdown like this:

<ReactMarkdown
children={articles.data[0].attributes.content}
rehypePlugins={[rehypeRaw]}
/>

6

I have one issue, with the CATEGORY_ARTICLES_QUERY: it doesn’t make the filtering, and returns all articles
I, personally, couldn’t find the fix for this one :frowning:

7

Hi,

I’ve checked the tutorial in detail, but my code doesn’t return anything. I have had access in the Strapi in the backend, but the http://localhost:3000/ remains blank, even with webpack compiled successfully in the frontend.

Could you help me please?

Thanks

8

In the past you could fetch via graphql the content property of an article and display it in ReactMarkdown component.

But the api has changed. Now the graphql api provides a field named blocks: [ArticleBlocksDynamicZone].

How can I fetch data from a dynamic zone and display it in react?

9

If you find an error such as

Cannot read properties of undefined (reading 'bind') useQuery

Follow what is described on this stack overflow question as the solution:

We need to update the Apollo Client Config

10

I wanted to point out that some of the dependencies are old and may cause conflicts for this instructions.

1. React 18 compatibility, to your console

ReactDOM.render is no longer supported in React 18.

To fix this warning
Remove this
import ReactDOM from "react-dom";
Replace with this
import { createRoot } from 'react-dom/client';

And Instead this

ReactDOM.render(
  <Router>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Router>,
  document.getElementById("root")
);

Use this

const root = createRoot(document.getElementById('root'));
root.render(
    <Router>
        <ApolloProvider client={client}>
            <App />
        </ApolloProvider>
    </Router>
);

2. About installing dependencies for apollo

Instead this
yarn add apollo-boost @apollo/react-hooks graphql react-apollo
Use this
yarn add @apollo/client graphql

The problem of first one is conflict with the latest packages and also you will encounter

Cannot read properties of undefined (reading ‘bind’) useQuery

Note that if you have this installed previously, just delete apollo-boost, @apollo/react-hooks, and react-apollo to your package.json then type the 2nd one to update your libraries

Please refer Apollo Docs

Hey! How about the missing dependencies that I removed, now I getting more errors, THANKS A LOT! :neutral_face:

Just Re-import your packages

For ./src/utils/apolloClient.js
Remove this

import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";

Replace with this
import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";

For ./src/index.js
Remove this
import { ApolloProvider } from "@apollo/react-hooks";
Replace with this
import { ApolloProvider } from '@apollo/client';

For ./src/components/Query/index.js
Remove this
import { useQuery } from "@apollo/react-hooks";
Replace with this
import { useQuery } from '@apollo/client';

It should fix the apollo packages

3. Lastly, not so important but maybe helpful for others want try this React integration
You copied everything querying commands (I don’t know, I just having weird naming habits) and the still breaks, and you encounter like these error message
"message": "Variable \"$slug\" of required type \"String!\" was not provided." and thinking what happen

Just remove the exclamation mark !, the reason that message occur, it because the fields with exclamation mark ! is Required, to bypass instead this ($slug: String!) change to `($slug: String)', just bring it back, because this field should not nullable in the first place.

I hope this help