Question about /data/graphql/Database/* quotes on feature/apollo

Hi all,

On the branch feature/apollo I can see in the folder /data/graphql/Database/* some files with code quoted with backticks, like in https://github.com/kriasoft/react-starter-kit/blob/feature/apollo/src/data/graphql/Database/users/CreateUser.js#L4.

My question is if this is about Apollo or about Graphql, and what do they mean.

Thanks!

[langpavel]

Ughh this.props.dataForComponent.data.databaseGetUser souds really crazy. You can use something like this.props.user in component, go for it! 🙂 It’s real and you can unlock new level, please keep discovering 🙂

[ghost]

@langpavel Ok, I think I got the idea. I just managed to retrieve the parameter on the url with this:

Lets say I have this route for a component oneUser:

   {
     path: '/oneuser/:id',
     load: () => import(/* webpackChunkName: 'oneUser' */ './oneUser'),
   },

Then in the component, in index.js:

import React from 'react';
import OneUser from './OneUser';
import oneUserQuery from './OneUser.graphql';
import Layout from '../../components/Layout';

async function action({ client, params }) {

  const data = await client.query({
    query: oneUserQuery,
    variables: { id: params.id },
  });
  return {
    title: 'React Starter Kit',
    chunks: ['oneUser'],
    component: (
      <Layout>
        <OneUser dataForComponent={data} />
      </Layout>
    ),
  };
}

export default action;

The query in OneUser.graphql will be:

query OneUser($id: Int) {
  databaseGetUser(id: $id) {
    id
    email
  }
}

And in oneUser.js:

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './OneUser.css';

class OneUser extends React.Component {
  render() {
    const { id, email } = this.props.dataForComponent.data.databaseGetUser;

    return (
      <div className={s.root}>
        <div>
          <h1>This is one thing</h1>
          <article key="a">
            <h1>{id}</h1>
            <p>{email}</p>
          </article>
        </div>
      </div>
    );
  }
}

export default withStyles(s)(OneUser);

I just had to modify the databaseGetUser query to search by id instead by email.

It works, but… is this.props.dataForComponent.data.databaseGetUser a proper way to retrieve data from index.js?