Mocking API responses with React Apollo – Carlos Martinez – Medium

  • Mocking API responses with React ApolloApollo Client and the GraphQL tools that have been made open source within the last years are pretty awesome, the community that is being builded around them is great.
  • However, as with every new technology, there are a lot of things that need to mature and improve.Documentation on testing is definitely one of the bits that needs a lot of improvements, it isn’t clear what to do, and I personally found myself digging into the source code to understand what to do.One of the problems I faced was that I wanted to use mock responses when testing my app components, and there are at least two ways of doing this:The first way is to use graphql-tools.
  • From their docs:This package allows you to use the GraphQL schema language to build your GraphQL.js schema, and also includes useful schema tools like per-type mocking.You can use this library together with a custom MockNetworkInterface to return mocked responses to your components:const { mockServer } = require(“graphql-tools”);const { print } = MockNetworkInterface { constructor(schema, mocks = {}) { if (!
  • schema) { throw new Error(‘Cannot create Mock Api without specifying a schema’); } this.mockServer = mockServer(schema, mocks); } query(request) { return request.variables); }}This is nice, and very flexible, with graphql-tools you can do pretty much whatever you do in your actual API.What I didn’t like about this approach is that you need your schema in sync with the schema defined in your API (you can do this making an instrospection query to your backend), I also found this approach overcomplicates things unnecessarily.The second (and simpler) approach I found was to use the mockNetworkInterface class, this class is defined in react-apollo/test-utils, you can have a peek on it here.To use it, you first need to define some Mock Requests (these requests need to be exactly the same your components will make):const GraphQLMocks = [ { request: { query: UserProfileQuery, variables: {} }, result: { data: { current_user: { id: 1, first_name: ‘Foo’, last_name: ‘Bar’, email: ‘foo@example.com’ } } } }];The UserProfileQuery is exported from your component:export const UserProfileQuery = gql` query userProfile { current_user { id first_name last_name email } }`;And this is how you use it to setup your tests:import { mockNetworkInterface } from ApolloClient from ‘apollo-client’;import { ApolloProvider } from ‘react-apollo’;import { mount } from ‘enzyme’;import App from ‘.
  • /App.js’;import React from ‘react’;const setupTests = () = { const networkInterface = // or mocks); const client = new ApolloClient({ networkInterface, addTypename: false }); const wrapper = mount( ApolloProvider client={client} App / /ApolloProvider ); return { wrapper };};It is important that you pass addTypename: false to ApolloClient, otherwise you would have to include a __typename field in all your mocks and queries.Now any queries your components make will be handled by your mocked responses, you have full control of what you want to return.And that’s it!

Apollo Client and the GraphQL tools that have been made open source within the last years are pretty awesome, the community that is being builded around them is great. However, as with every new…
Continue reading “Mocking API responses with React Apollo – Carlos Martinez – Medium”

Check my Universal Reactjs boilerplate #es6 #javascript #mongodb #nodejs #reactjs #redux #webdev #webdevelopment

  • , contains dumb React components which depend on containers for data.
  • , contains starting template (if project got cleaned with ).
  • Container care about how things work, while Component care about how things look.
  • You can see the sample app with this script if you’re not cleaning the project yet

    Before start the new project, you can use this script to remove the sample app, this script will remove everything inside and directories, and generate the starting and

    Bundle all the files, it will create the for all the style files, for the client app, and for the server app.

  • If you want to see your project in production environtment

    This Universal ReactJS Starter-kit is packed with plop generator, you can generate component or container template using this script

universal-react-starter – Universal React starter with Redux, React Router, Express, CSS/SASS Module, Mongoose, Webpack.
Continue reading “Check my Universal Reactjs boilerplate #es6 #javascript #mongodb #nodejs #reactjs #redux #webdev #webdevelopment”

8 things to learn in React before using Redux

  • A component can manage a whole lot of state, pass it down as props to its child components and pass a couple of functions along the way to enable child components to alter the state in the parent component again.
  • Component A is the only component that manages local state but passes it down to its child components as props.
  • In addition, it passes down the necessary functions to enable B and C to alter its own state in A.

    Now, half of the local state of component A is consumed as props by component C but not by component B.

  • When you lift the local state management down to component C, all the necessary props don’t need to traverse down the whole component tree.
  • When a library such as Redux “connects” its state managements layer with React’s view layer, you will often run into a higher order component that takes care of it (connect HOC in react-redux).

Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux…
Continue reading “8 things to learn in React before using Redux”

8 things to learn in React before using Redux

  • A component can manage a whole lot of state, pass it down as props to its child components and pass a couple of functions along the way to enable child components to alter the state in the parent component again.
  • Component A is the only component that manages local state but passes it down to its child components as props.
  • In addition, it passes down the necessary functions to enable B and C to alter its own state in A.

    Now, half of the local state of component A is consumed as props by component C but not by component B.

  • When you lift the local state management down to component C, all the necessary props don’t need to traverse down the whole component tree.
  • When a library such as Redux “connects” its state managements layer with React’s view layer, you will often run into a higher order component that takes care of it (connect HOC in react-redux).

Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux…
Continue reading “8 things to learn in React before using Redux”

How to use React’s Provider Pattern

  • Therefore you could use React’s context to give every component access to the colored theme.
  • That way every component that needs to be styled according to the colored theme could get the necessary information from React’s context object.
  • You have the Provider component that makes properties accessible in React’s context and components that consume the context.
  • This Provider component uses React’s context to pass down the state implicitly.
  • You provide the state to your component as props, the component wraps it into React’s context and all child components can access the state by using a higher order component such as from the react-redux library.

This article gives you a walkthrough for React’s provider pattern. After reading it, you should be able to implement…
Continue reading “How to use React’s Provider Pattern”

I’ve created a flexbox bootstrap like grid for #reactjs, that uses #styledcomponents and styled-system … \cc @jxnblk

  • Lightweight bootstrap like grid system for reactjs that uses flexbox.
  • Built on top of and much to:

    If like me, you still think about grids in terms of bootstrap, , , , , , and , then look no further.

  • styled-gel uses bootstrap 4’s mobile first repsonsive breakpoints which are by default:

    styled-system can be configured with styled-components to override the breakpoints and number of columns in a row with more configuration options to come.

styled-gel – Styled-components over bbc gel-grid
Continue reading “I’ve created a flexbox bootstrap like grid for #reactjs, that uses #styledcomponents and styled-system … \cc @jxnblk”

Firekit concepts to sync Firebase and redux – Tarik Huber – Medium

Firekit concepts to sync Firebase and redux  #react #firebase #javascript #redux #reactjs

  • That is one of the main concepts firekit uses to manage the sync of the firebase realtime database and the redux store.
  • Firekit allows you to make your firebase reference with all the native firebase query and filtering functions and just send the resulting reference to firekit and it will listen to all changes and sync them to the redux store.Saving only simple jsonIf using instances of classes in your library you get into the situation to save to the redux store complicated objects and functions.
  • By saving only simple json in your redux store persistence can be done however you want and with every tool and concept you wish.Persistent listenersThe main reason I choose to create firekit is that all other libraries link the whole listening cycle to a single component.
  • You can leave the listening cycle in a component, page, application or any other level you want.This approach is the same no matter if you are listening to lists or simple paths in the firebase realtime database.ConclusionFirebase is made to make our developer lives easier.
  • The main goals are to give the user maximal flexibility for using firebase and just providing easy and simple tools to sync data to the redux store.I you are interested on how the library works or want to try a real world project visit the github repo with the source code or the demo page.If you like how this library works you could put a star on the github repo đ

Firekit is a library that helps you sync your Firebase realtime database with the redux store of your react application. It uses some new approaches witch we will try to present in this article. If…
Continue reading “Firekit concepts to sync Firebase and redux – Tarik Huber – Medium”