Archive for the ‘Uncategorized’ Category

Querying for data by shop id

August 13, 2020

Today I managed to get queries working by shop id. I defined a new type on the server side and ensured that things worked in graphiql, then I migrated the graphiql query to the frontend and wired things up.

The next thing I’d like to do is probably to try to figure out subdomains, and use this to select the correct data by shopId from the frontend.

Updated seeds

August 12, 2020

A modicum of work today. I performed a few database migrations and updated my seeds.

In particular, I created a Stores table to hold records of shops in the soap site app. Fields are owner_id, is_sponsored, subdomain. I also added store_id to the products table as a key.

Next, some pre-work to be able to conditionally fetch only products for particular stores. I need to determine which store I’m currently on, too. Presumably that should be handled by routing from the rails app.

eg. maxwellshatsemporium.soap-site.com/shop should route to a particular store, and pavlovssocksescapade.soap-site.com/shop to another.

I will want to infer the store_id and then pass that to the server via a graphql query to fetch products only for that store, and then display them.

Connect with stripe only on admin page

August 11, 2020

Very small change today, just ensured that the connect with stripe button was only instantiated on the admin page.

I decided that since the STRIPE_CONNECT_CLIENT_ID would be visible anyway on the frontend via the http request to stripe in the network tab, it doesn’t matter too much if that string is present in the client code.

For secrets though, like usernames and passwords, I need to be a bit more discerning. I’ll aim to tackle that next, and try to figure out authentication for shops etc. This will probably be a key challenge. Part of this will naturally be figuring out how to authenticate to different shops with different inventories and items for sale.

Gardening + reconfiguration of routes

August 10, 2020

Today, apart from a bit of gardening (and bonus planting!) I focused mainly on using react-router-dom in my soap-site application.

In particular, I identified that it would probably be best to namespace my shop react app in the rails routes so that I could wildcard paths to the index page on the server side, and let react-router-dom handle routing on the client.

I implemented a simple new route to a new component, the shop admin page.

npx @hellsquirrel/create-gql-component create /app/javascript/components/Shop/Admin

Other today things included the identification of a couple of udemy courses that might be useful to follow up on, Complete React Developer Zero to Mastery, and Microservices with Node.js and React.

Another thing that I discovered was that apollo-boost, although it makes apollo easier to use, doesn’t yet support graphql subscriptions. See this feature request in the apollo feature tracker.

The next thing I’d like to do is to pull the stripe connect button properly into the react app, as it is currently sitting outside it. This will require me to apply some of the lessons from Full Stack React with Apollo Boost and Node.js, in terms of storing tokens in localStorage and wiring them back to the server via apollo-client and actioncable over a websocket.

I’d also like to store authenticated session state in a higher order component and wrap my Root object in it. For that matter, I’d also like to implement authentication! Last of all, I’d like to track which particular shop it is that one has logged into / navigated to. This element of state also need to be stored as a token in localStorage.

But after figuring out these things, I believe the main initial architectural challenges for the soap site POC should have been solved.

I will then want to build out a bit of configurability in the /shop/admin page (inventory + stock levels, as well as a shop open/close toggle), have a /shop/user page for tracking orders + also configuring delivery address + contact details.

And finally I’d like to deploy the thing. Probably heroku is a safe bet for a starting point. Then maybe a cloud provider if I want to move to something larger later.

A few other thoughts for the POC. Stripe connect only for now (braintree can come later), with profit model a percentage of each transaction / sale (which is quite achievable using Stripe’s api). And potentially a tiny subscription fee as well (5 USD/month seems maybe reasonable). A boolean in the relevant model that flags whether an account is sponsored and therefore has no billing.

While in alpha, there will be no sign up page for self service shop creation, and I will just insert credentials by hand. Ultimately, though, I’d want to implement this functionality before beta.

Audited section 5 through 7 of the full stack react with apollo course

August 9, 2020

Today I audited sections 5 through 7 of the full stack react with apollo boost course.

One thing that I’ve noticed is that errors are not handled properly per the course instructions, I think that there has been a change in a library. Maybe one needs to set the errorPolicy for the apollo client?

Regardless, I feel that now I’m starting to reach saturation point in terms of learning new things … certainly learning how to handle authentication and pass jwt tokens between client and server using the apollo client was very useful. I think now it is approaching the time when I should start trying to apply some of this knowledge.

Also, since the aforementioned course uses react router and react component hooks, it might be wise to bounce back to the other course for a bit and attempt to tear through another few sections.

So over the next day or two I might switch back to execution mode … anyway I’ll see how I go.

More learning

August 8, 2020

Today I:

  • Learned about react-router-dom, and how that could be used to provide different routes for a front end application. This will be quite useful when I try to implement admin pages, as well as sign in and sign up pages for instance in the soap-site. (npm install react-router-dom to use)
  • Learned about how to wire up apollo-boost and react-apollo to fetch data from an express backend.
  • Gained some small exposure to hooks (stateless functions) in React.
  • Understood a bit about how to use bcrypt to encrypt data in a pre save hook middleware for security.

In particular, I worked through section 4 and about half of section 5 of the new course.

Worked through queries + mutations, on to apollo client

August 7, 2020

Today I worked through the queries + mutations section of the full stack react with graphql and apollo boost course, and made a start on the apollo section using create-react-app to create a client.

npm install react-apollo apollo-boost jwt-decode

was the magic command.

I’m looking forward to the next few lectures, hopefully it helps to build in my mind better intuition for using apollo in a client-server implementation. Evidently I’d be using rails as the server, and react as the client for where I’d eventually want to deploy this knowledge.

Audited first couple of sections of graphql with apollo course

August 6, 2020

Today I got started with the “Full-Stack React with GraphQL and Apollo Boost” course. As discussed previously, I thought it would be useful to first focus on learning apollo and graphql a bit better before trying to progress my soap site application.

The main reason for this is that I am after displaying only certain information to certain users in the soap site app for different shops (also, how do I want to route for different shops? do I want a semi-personalised url, eg mycakeshop.soap-site.com?), and to do that I need to have a firmer grip on the requisite tech rather than just throwing code in an editor and hoping something sticks. Of course, that is sometimes a good way to get started, but one needs to iterate that with learning. Which is what I plan to do over the next few days.

As mentioned, today I got started on said course. It uses mongodb instead of postgres, and uses mongodb atlas for a cloud database (an interesting choice), and heroku for deployment of a node.js application. So node.js for the backend, react for the frontend, graphql for the schema, mongodb for the database, apollo boost for the glue between node.js and react.

I’ve actioned the first couple of sections now – essentially enough to wire up a connection to a cloud database on mongodb atlas, and wire up graphiql and graphql for a simple stub schema for express. I look forward to learning a bit more about apollo in later sections. Apparently apollo boost makes it very straightforward to write terse code for setup of apollo in an application. If so, this is good news, because the evil martian tutorial setup for same looked a bit verbose to me – although that could just have been because they wanted to get a bit fancy and do caching with subscriptions etc.

Nonetheless I feel that I’ve made a good start on this today, hopefully I have a bit more time to get solidly into this new course shortly.

Progress on a number of fronts

August 5, 2020

Fusion / baseload generation

  • I’ve been pleased to hear recently that the Wendelstein 7-X stellarator project, although delayed by the pandemic, is progressing, and they look set to achieve effectively a steady state plasma in 2022 (if all goes well).
  • The ITER mega-project is also gathering pace. First beams are supposed to be 2025 I think?
  • Tokamak energy and HB11 seem to also be interesting outfits to watch.

Aerospace

  • Reaction engines continues to do well and move from strength to strength. They are also just one of many companies in aerospace who are working on interesting things at the moment; indeed the sector seems to be experiencing something of a renaissance. Last that I checked, I believe that they were on track to build a prototype spacecraft based on their technology by 2025.

Mathematics

Welfare

  • I am excited that there is finally political will to provide social housing to a number of needy individuals in my neck of the woods – even if it took a pandemic to summon the political capital and clout to get it done.

Knowledge gap, apollo bridge between react + rails

August 4, 2020

Today I realised that I have a bit of a knowledge gap, in terms of communicating between the backend and the frontend using apollo. In order to address this, I plan to start working my way through this course on udemy: full stack react with graphQl and apollo boost. Only seven hours of content so it should be moderately straightforward to complete.

I noticed on reviewing the evil martian code from earlier that the way communication between the frontend and backend was achieved was through the use of:

  • defining an apollo client and inserting it into an apolloprovider react component.
  • apollo clients can communicate with graphql with an httplink and with standard rails routes via an actioncable link (I think?)

Regarding actioncablelink, it is part of the graphql-ruby-client library:

graphql-ruby-client includes support for subscriptions with ActionCable and ApolloLink.

To use it, construct a split link that routes:

subscription queries to an ActionCableLink; and

other queries to an HttpLink

Regarding httplink, it is part of the apollo-link library:

apollo-link-http

Get GraphQL results over a network using HTTP fetch.

The http link is the most common Apollo Link, a system of modular components for GraphQL networking. If you haven’t done so already, read the Apollo Link docs to learn about the Apollo Link ecosystem and how to use this link with libraries like Apollo Client and graphql-tools, or as a standalone client.

The http link is a terminating link that fetches GraphQL results from a GraphQL endpoint over an http connection. The http link supports both POST and GET requests with the ability to change the http options on a per query basis. This can be used for authentication, persisted queries, dynamic uris, and other granular updates.