Question about how to connect reactjs to graphql

JavaScript
1

I have a problem when I tried to connect my app.js to graphql.
this is my app.js

import React, { Component, Fragment } from 'react';
import './App.css';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import ProductBrand from './Components/ProductBrand';
import Brands from "./Components/Brands";
import ApolloClient, { InMemoryCache } from "apollo-boost";
import {ApolloProvider, Query} from "react-apollo";
import gql from "graphql-tag";

const client = new ApolloClient({
  uri: 'http://localhost:4000/',
  cache: new InMemoryCache()
});

export const GET_ALL_CATEGORIES = gql`
query{
  category{
    products{
      id
      name
      inStock
      gallery
      description
      attributes{
        id
        name
        type
        items{
          displayValue
          value
          id
        }
      }
      prices{
        currency{
          label
          symbol
        }
        amount
      }
      brand
    }
  }
}
`;


// client.query({
//   query: product_brand,
// fetchPolicy: "cache-first"
// }).then(res => console.log(res));

class App extends Component{


  render(){
    return(
      <ApolloProvider client={client}>
        <div className='App'>
          <Fragment>
          I am the App component
          </Fragment>
          <ProductBrand />
          <Brands />

          <Query query={GET_ALL_CATEGORIES}>
            {({error,loading, data}) => {
                if(error) return "something went wrong !!!";
                if(loading || !data) return "Loading ... ";
                const category = data.category;
                return category.map((c,index) => <div key={index}>{c.products.brand}</div>);
              }
            }
          </Query>

        </div>
      </ApolloProvider>
    )
  }
}

export default App;

and this is the output>>

output1
output11262Ă—231 35.9 KB

and my graphql query is taken after built and run (localhost:4000)
my output stops at “loading” stage and doesn’t show “data” ???>>

# Write your query or mutation here
query{
  category{
    products{
      id
      name
      inStock
      gallery
      description
      category
      attributes{
        id
        name
        type
      	items{
          displayValue
          value
          id
        }
      }
      prices{
        currency{
          label
          symbol
        }
        amount
      }
      brand
    }
  }
}

I really tried hard to figure out what’s wrong but I failed, so, please can you help me?
thanks a lot…

1 Like
2

Do you have a link to a repo containing the full code?

3

just give me one moment , i’ll make a new repo

4

This is the main app github link

This is the graphql endpoint

5
  1. You have a mismatch of lib versions. Read the migration docs on the version of apollo client you are using.
  1. category is not an array.

When I fix that I get the mapped data.

1 Like
6

Thanks , I will read it up and figure how to fix it …

7

The docs are pretty good, you should be able to figure it out.

I assume you are following some old article/tutorial on this? I’d suggest going with function components and hooks and the latest version of the libs (and the hooks they provide).

That is unless it was specifically asked that you use class components and the older versions of the libs. If you were not, it just looks a little odd to be using the old way of doing things.

8

Blockquote
That is unless it was specifically asked that you use class components and the older versions of the libs.

That’s exactly the case, and I cannot figure it out till now for some reasons …

9

These are the imports I used instead.

import { ApolloClient, InMemoryCache } from '@apollo/client/core';
import { Query } from '@apollo/client/react/components';
import { ApolloProvider } from '@apollo/client';

I guess, you can also downgrade the client but I didn’t test it.

Seems like an odd requirement but I guess it has to do with their code-base using class components and making sure you can work with it. Still, they might give you a starter client repo as well just so you do not have to spend all day figuring out the setup.

1 Like
10

Thank you so much Lasjorg, it work finally after adding your code and after modifying my tag like this>>

          <Query query={GET_ALL_CATEGORIES}>
            {({error,loading, data}) => {
                if(error) return "something went wrong !!!";
                if(loading || !data) return "Loading ... ";
                const products = data.category.products;
                return products.map((p,index) => <div key={index}>{p.brand}</div>);
              }
            }
          </Query>

output4
output41920Ă—492 62.7 KB

They did not give me any starter client repo, they just give me the endpoint repo of graphql.

11

No problem, it wasn’t super easy to debug, but it did seem apparent after using code that should work that it had to be something other than the code.

That is also why I said they should provide a starter repo. An empty one with no code but with the correct packages and maybe a note about the versions. But I also do not know what type of conversation lead up to this test assignment.

Anyway, good luck and happy coding.

12

Hey ,

Did you finish the project and submitted it? I just started working on this project as well. Problem is the same that they use class components. anyway, could you please tell me if it is worth the shot and i f you were selected or heard back from them?

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.