GraphQL: how is me query handled

[ghost]

Hi all,

I'm having a look to RSK, and I developed easily a nice frontend for a small project I have. I have been trying to query data from database, and read #969, #1296 and also some messages on Gitter channel, with no result.

I can't manage to retrieve data with the solutions given in the mentioned threads. I suppose this is because RSK is an ongoing project, and the current code have been modified since that comments. As the docs are really tiny, I would like to ask here for a bit of help.

Given the code from scratch, I understand that I have to add some logic in server.js, like in #1296 (comment), and also modify the type definition in a similar way. But when I go to http://localhost:3000/graphql and try to retrieve data with { me { id email } news { title author } }, the me query returns null.

If someone could come up with a working example of a query for the current code I would be really grateful.

Thanks!

[langpavel]

me is null for not logged user. You can try return a mocked user.. Or make login working. You can see feature/apollo branch, there is more complex example.

[ghost]

Thanks, I can't find the logic in where the user is null when not logged.

Also, would it be possible to see a working example for a query with proposed database?

[langpavel]

Here is me GraphQL response fulfilling: https://github.com/kriasoft/react-starter-kit/blob/master/src/data/queries/me.js#L16
request is express request, passed here: https://github.com/kriasoft/react-starter-kit/blob/master/src/server.js#L116

[ghost]

Hi,

Thanks for the answer. I see that the title of the thread was changed to the me query, but in fact what I am looking for is for an example of a Query without authentication. I would maintain the title of the thread aiming to this point.

I'm pretty sure I can come up with a solution for authenticating in the app, but before putting time there I would like to play with the existing database. I can't find a way to connect with it, and the solutions at #1296 and #969 are fragmentary. If there would be any possibility to see a working example for this that would be great.

[langpavel]

Hi @nikitong, please keep the title, I changed it because I believe that now it reflects what discussion here is about
Me query works without authentication, but depends on authentication state from request, so it always work, but if user is not logged in, response is null

[ghost]

Ok, but anyway, I am really curious about how to connect and play with the database without authentication...

[langpavel]

You should add your specific code here
https://github.com/kriasoft/react-starter-kit/blob/master/src/data/queries/me.js#L14..L21

[langpavel]

What database? I prefer using right driver without ORM, You connect to database as you normally did in node, for postgres use pg for example 🙂

[langpavel]

I know, somebody implement sequelize, I personally don't like it, please refer to sequelize doc or use something that will fit you more

[ghost]

So if I want to use MySQL I can get rid of /src/data, which is about GraphQL and Sequelize implementation.

Then in server.js I can connect to MySQL with mysql package, but the question at that point will be how to fetch the data from the frontend.

Your project node-pg-async is an implementation with PostgreSQL?

[ghost]

I'm checking now the feature/apollo branch, and I can see the data in http://localhost:3000/graphql, which is a big step.

Thanks!

[langpavel]

So if I want to use MySQL I can get rid of /src/data, which is about GraphQL and Sequelize implementation.

Yes

Then in server.js I can connect to MySQL with mysql package, but the question at that point will be how to fetch the data from the frontend.

You should use GraphQL, server can use shortcut, doesn't need an extra HTTP fetch, client will ask against /graphql endpoint.
React and GraphQL code is same for server side and client…

Your project node-pg-async is an implementation with PostgreSQL?

I'm still using it, but I don't have time to maintain it actively, so it may be deprecated.
I can recommend brianc/node-postgres (published as pg on npm) with javascript backend (no pg-native)

I'm checking now the feature/apollo branch, and I can see the data in http://localhost:3000/graphql, which is a big step.

🎉 Have a fun with stack 🙂

[ghost]

Great!

Also, checking the login, Facebook rejects http, and requests for https, but https://localhost:3000 rejects connection to server. I will open a new question, because this may be useful for others…

Thanks!

[xpander001]

Actually I'm trying to retrieve the value of the user before loading a route, so following the example of the home route I'm doing:

async function action({ fetch }) {
  const resp = await fetch('/graphql', {
    body: JSON.stringify({
      query: '{me{id}}',
    }),
  });
  const { data } = await resp.json();
  if (!data || !data.me) {
    return { redirect: '/login' };
  }
  return {
    title,
    component: (
      <Layout>
        <MyProtectedComponent title={title} />
      </Layout>
    ),
  };
}

However, when I access the page, the request object in

react-starter-kit/src/data/queries/me.js

Line 14 in 454efa6

resolve({ request }) {

is empty.

I think it's because in the createFetch function we are passing an empty object as request.

react-starter-kit/src/createFetch.js

Line 53 in 454efa6

{ request: {} }, // fill in request vars needed by graphql

However, if I check the req param in the express route, the request is correctly authenticated. However, that data is lost somewhere between that point and the graphql request. How should I make the graphql request authenticated? I fire the same query using the graphql simulator, it's authenticated and it returns the correct user instead of null.

[langpavel]

GraphQL will filter out everything not matching the schema

[ghost]

@xpander001 Where are you adding your async function action({ fetch }) { … function exactly?

[ghost]

@langpavel I had some fun with feature/apollo branch; is quite complicated though, and I would like to implement MySQL. As I'm learning redux I will give a try to feature/redux.

I was wondering about what is neccesary and what not. For example, you said that I can remove sequelize, but I have to stick with GraphQL. Why?

Another question is about the general configuration of a SQL DB in RSK. How do you implement it here? Can you share any example with PostgreSQL in RSK?

Thanks!

EDIT:

Modified /src/config.js to add the data for the connection:

  mysqlDatabaseHost: 'localhost',
  mysqlDatabaseDB: 'theNameOfTheDatabase',
  mysqlDatabasePass: 'incrediblePassword',
  mysqlDatabaseUser: 'thisIsMe',

And following the docs from sequelize modified /src/data/sequelize.js as follows:

import Sequelize from 'sequelize';
import config from '../config';

const sequelize = new Sequelize(
  config.mysqlDatabaseDB,
  config.mysqlDatabaseUser,
  config.mysqlDatabasePass,
  {
    host: 'localhost',
    dialect: 'mysql',

    pool: {
      max: 5,
      min: 0,
      acquire: 30000,
      idle: 10000,
    },
    // http://docs.sequelizejs.com/manual/tutorial/querying.html#operators
    operatorsAliases: false,
  },
);

export default sequelize;

Works perfectly…

[langpavel]

Hi @nikitong, you must pass data from server to client some way.. GraphQL is nice way to do.. Of course, you can use REST, but as RSK will show you how to go with GraphQL, you should use the better one 🙂

[ghost]

So here GraphQL is in charge of the communication between backend and frontend, it replaces a full REST API. And if I understood it right Sequelize works in the server transforming the GraphQL query into specific SQL.

I'm also struggling to understand which benefits has Apollo here. I'm reading about it, but I can't see the point of implementing it. Editors like Atom or VSCode, ESLint and Prettier can't parse what is inside the string literals, so it looks like a step back to me.

[langpavel]

@nikitong Which Apollo? On client side it handles caching. On the server, well, I'm trying understand it, it's not my work.
For the server, just plain graphql and express-graphql can be used

Editors may support template string syntax:

const query = gql`
# GraphQL query here
viewer { name }
`;