We upgraded react-spring to v9x which is still in beta and buggy.

v9x fixes a bug where useChain is not idempotent.

If we need to downgrade to v8, we'll need to add back in some code to make our useChain call in our footer work even if the component is rerendered.

-  let previousOpen = React.useRef(open)
-  React.useEffect(() => {
-    previousOpen.current = open
-  })
-  let openHasChanged = open !== previousOpen.current
-
   useChain(
-    openHasChanged
-      ? open
-        ? [closedSpringRef, openSpringRef]
-        : [openSpringRef, closedSpringRef]
-      : []
+    open ? [closedSpringRef, openSpringRef] : [openSpringRef, closedSpringRef]

https://miragejs.com/asdf... what dis lol

http://miragejs.com/repl/v1/146

Visit this repl, click Database then click Comments. There's an error and it reloads.

The createRedirect API call in gatsby-node was working at one point but now it's not, something about routes existing on the client too. Need to investigate more. Need to be able to have header link go to /docs (so its active for any child route) but do a proper redirect.

Update: took care of /docs being active thing with our own Link for now (activeFor prop). Still need to get redirects working for every page.

Now that v0.1.0 of https://github.com/miragejs/graphql is out, we should integrate it into the site so folks can find about it more easily!

TODOS:

• Add a guide to the site
• [REPL] Add support for graphql library (get Sandbox 230 working)
• [REPL] Add support for template string (get Sandbox 231 working)
• [REPL] Add support for string request body (get Sandbox 232 working)

Add a guide to the site

To start, I think we should create a single new guide page on the site under Advanced, called GraphQL. And it should have basically a quickstart/overview, that shows off how @miragejs/graphql works. Then, a link to the repo.

I think this will let Rocky/us/anyone else keep iterating on @miragejs/graphql while it's new, but give folks a way to find out about it on the site.

Add GraphQL support to the REPL

The second main piece is getting GraphQL support in https://miragejs.com/repl. There's a lot we can do here but I'd like us to focus on the smallest steps possible in order, to get us some forward momentum.

The first is that the graphql library currently doesn't work in the REPL. You can see from Sandbox 230 that there's a runtime error, process is not defined. It seems graphql is trying to access the node process (which seems strange to me because I've used this in client Mirage code before). Anyway, this is as far as Ryan and I got last time we were investigating this, so this is really the first thing that needs to be explored before GraphQL can work at all in the REPL.

Once 230 works, the next improvement would be to add template string support, so the schema can be written using multiline backticks. That's Sandbox 231. The reason template strings don't work right now is that the Server config input currently does not have full ES6 support. The library we're using to evaluate the user's input is called plnker, and we haven't dug deep into how it's configured. But it seems certain ES6 features are supported while others are not. Unfortunately, ES6 template strings (back ticks) are not supported, which makes any GraphQL example unpalatable. So, I think the next thing should be figuring out how to get template strings supported in Plunkr. This is an unknown unknown, I don't know what it involves or even if it's possible. Hopefully there's a way to do it, but there's a possibility we may have to end up moving to our own bundling solution with something like Rollup. Plunkr has allowed us to kick this can down the road for now.

Last would be getting Sandbox 232 working, which uses a GraphQL Query as the request body, instead of a JSON object with a query key and a GraphQL query as the value. This should be the easiest fix, because we just have some of our own validation on the request body input field at the moment ensuring it's JSON, but that's just there to help folks who are using Mirage to handle normal JSON payloads. So, I think we should remove that validation so raw text can be used to make requests.

There's of course a ton more we can do to make the GraphQL REPL experience better but I think this is where we should start!

Want to wire up SVGO for our svgs. Whatever we're using right now is not that and isn't as well maintained.

Need SVGO to automatically swap all ids on SVG elements to unique-by-filename, so things like filters don't collide. (Right now I need to manually change those after exporting from Sketch.)

Someone on HN asked + we do already publish a UMD build. Just need to document it.

https://unpkg.com/browse/[email protected]/dist/

The feGaussianBlur SVG filters really slow down the site. Noticeable when resizing window on all browsers.

Need to investigate alternatives to blurring at run-time like this with SVG. Maybe we can downsample or render a much simpler SVG (the current one is like 3000 pixels wide).

For example https://miragejs.com/docs/getting-started/overview

It's because they're not being server-rendered.

Use the createPage API to server-render each route from router-service. I experimented with this and it does seem to work, just gotta follow up on it

This is default behavior from Reach Router, so we'll need to address is by adding an onClick handler to our own links.

Should first check Reach Router issues if there's an existing solution.

First of all, thank you for Mirage! It fits my needs exactly. MSW requires an HTTPS connection to host, which was a time-suck and finally a dealbreaker for our S3-hosted staging.

I hit some confusion when I got to the section on dynamic route handlers, specifically:
schema.movies.all() versus schema.all('movie')

The first gave me a TS error, the second did not, and because I'm new to Typescript it held me up for a little while. Maybe worth a change to the docs or a change to the types (which I wouldn't know how to do).

Thanks again for a very helpful library!

Bug: When setting up server config in Mirage REPL and typing below the original viewport the focus jumps back to the top, presumably to the "loading" indicator, even though the cursor remain active at the end of the document.

Netscape 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36

Don't need feedback, just reporting.

I'd like to use the repl to answer questions like...

• How do I serve binary responses with mirage?
• How do I serve streaming responses with mirage?

I can use the repl to show the mirage server, but the postman style UI is not the best at visualizing what the server is doing in these situations. I think adding a "code mode" would be helpful. Instead of using the postman UI it would allow you to write fetch requests that execute against the server.

The following snippet has an error in it

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { Server } from "miragejs"

new Server({
  routes() {
    this.namespace = 'api'

    this.get('/todos', ({ db }) => {
      return db.todos;
    })) <-- The error, containg one too many ")"
  }
})

ReactDOM.render(
  <App />,
  document.getElementById("root")
)

Visit https://miragejs.com/api/classes/server/ on laptop screen, sidebar isn't accounting for fixed header. Need constrain height and add some bottom padding.

Problem

Solution

(Tested in Windows 10 Chrome)

Tracking issue for excluding Mirage from CRA.

To explore:

• https://github.com/gsoft-inc/craco
• https://github.com/arackaf/customize-cra
• https://github.com/harrysolovay/rescripts
• https://github.com/marcopeg/create-react-app/blob/master/packages/react-scripts/README.md
• facebook/create-react-app#3518 (Interesting approach to extending webpack in CRA)

• Filter out public classes
• Add styling to pages

"Finally figured it out, it was very simple but painful. If you are using the fetch API it is critical that you start the server prior to new Vuex(). If you are using Axios, it doesn't make a difference."

We should add this to the guides and also add a VueX example

I'd love to get Percy set up! Lots of custom styles going on in this app and would love to know if and when they change.

Toying with using a component tree to define routes, instead of the JS data structure we're using now. But want to keep it like this for now because it's a bit simpler.

Gotta make sure we can read it in & import it into node and stuff.

• Can't use template strings (+ likely many other ES6 features). Might have to bring in a bundler after all.
• Doesn't work in Safari
• Production bug atm – initial load w/custom config doesn't work
• Runtime or parse errors aren't showing up in Safari
• POST request (sam working on)
• Debounce repl

There's a couple ways to do this, but I think in the spirit of webpack the best approach is use null-loader with a rule that only gets added in production builds.

This could be wrapped up into a vue-cli package that does everything behind the scenes. For now, I think adding this small config is enough to get started.

Step X: Don't include Mirage in production builds

Although Mirage is only started in the development environment, its files are still included in production builds of the application.

To exclude Mirage from production builds use vue-cli's chainWebpack config.

First, install null-loader.

yarn add -D null-loader

Next, add the following to vue.config.js. If you do have a vue.config.js, create this file in the root of your application.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      config.module
        .rule("exclude-mirage")
        .test(/node_modules\/miragejs/)
        .use("null-loader")
        .loader("null-loader");
    }
  }
};

Now all of Mirage will be replaced with an empty module for your production app.

For our "routing API", default path to the route's name (just like in Ember) so we don't have to specify it on every one (most would use the default)

Hey Gang,

Thanks for this port. I'm an Ember dude stuck doing some React stuff and brought this over into my project. Awesome ... love it!

For us, I folded mirage into our React test environment. While it's fresh in my mind, did you want me to create fork of your site with some documentation for that React examples page: https://miragejs.com/examples/main/react

If you do want the help, let me know if you had any high-level expectations about what topics it would cover. I was thinking:

• Basic Configuration including example Model, Factory, Route
• Some Faker.js
• Some jest test examples

I do realize that some of this example info already lives here: https://github.com/miragejs/react-demo ... but it would be nice to break it down on the examples page you stubbed for this docs site.

Cheers.

Think this only happens in dev, but would be nice to fix!

And remove Ember-specific stuff

While trying to amend a value of /movies into. /api/movies and as soon as i type the first / the caret is moved to the end i end up writing //moviesapi

Using chrome 81.0.4044

https://miragejs.com/repl/v1/370

Basically, make this guy work! I think it's just a silly / naive client side validation on the request body field. Might be related to the escaping issue we ran into with the config input.

We're using https://www.gatsbyjs.org/packages/gatsby-plugin-netlify/ and these redirects aren't working. Investigate.

The overview section for passthrough can be confusing for folks working on apps that primarily interact with external APIs at fully qualified domain names (like @achhunna and me). The first example says "on the current domain" but the second says "All other API requests will still pass through". Maybe including a commented out example with a FQDN would help, and/or a note about FQDNs linking to the full API page for passthrough.

Hey all!

Why?
Because this is a very big issue for cypress developers...

When using cypress fixtures you are required to write out static JSON files in order to have mocked out responses.

I think this could be a huge selling point for mirage because you could swap using these static very limited in power JSON files to use the full power of a browser database with really minimal work.

How
So generally in order to mock out an HTTP request with cypress you would do something like this:

// createUser.json
{
    "id": 1,
    "firstName": "John",
    "lstName": "Doe"
}

// create-user.spec.js
it('Should create a new user', () => {
    // Lets assume we have an endpoint for creating a user
    // And we stub it out by telling cypress to use a fixture called createUser.json
    cy.server()
    cy.route({
      method: 'POST',
      url: '/users',
      response: 'fixture:createUser.json'
    }).as('createUser')

    // We define the values we want to enter into the inputs
    const FIRST_NAME = 'John'
    const LAST_NAME = 'Doe'

    // We find the form on the page, type in our predefined values and submit the form
    cy.get('form')
      .within(() => {
        cy.get('input[name="first_name"]').type(FIRST_NAME)
        cy.get('input[name="last_name"]').type(FIRST_NAME)
      })
      .submit()

    // We wait our app to send the request we stubbed out
    cy.wait('@createUser').then(({ response, request }) => {
      // and assert that the values that where sent to the server are the ones we typed in
      expect(request.body.firstName).to.equal(FIRST_NAME)
      expect(request.body.lastName).to.equal(LAST_NAME)

      // We want to make sure we are redirected to the correct url using the id that was created for the user
      cy.location().should(loc => {
        expect(loc.pathname).to.eq(`/users/${response.body.id}`)
      })

      // We want to make sure that the form is populated with the values that were returned from our api
      cy.get('form').within(() => {
        cy.get('input[name="first_name"]').should('have.value', FIRST_NAME)
        cy.get('input[name="last_name"]').should('have.value', LAST_NAME)
      })
    })
  })

The problem here is that if we ever change John Doe to be Jane Doe, this test would fail because the fixture JSON file doesn't change.

Luckily, not much is required to change this test to use mirage instead:

// server.js
import { Server } from 'miragejs'

new Server({
  routes() {
    this.post('/users', (schema, request) => {
      const user = JSON.parse(request.requestBody)
      return schema.users.create(user)
    })
  }
})

// create-user.spec.js
import { makeServer } from "../../src/server"

let server

beforeEach(() => {
  server = makeServer({ environment: "test" })
})

afterEach(() => {
  server.shutdown()
})

it('Should create a new user', () => {
    // Lets assume we have an endpoint for creating a user
    // And we stub it out by telling cypress to use a fixture called createUser.json
    cy.server()
    cy.route({
      method: 'POST',
      url: '/users'
      // Remove 👇👇👇 this line to tell cypress to let the request through
      // response: 'fixture:createUser.json'
      // Now we can change the user's name to anything and the test will still pass
    }).as('createUser')

    // We define the values we want to enter into the inputs
    const FIRST_NAME = 'John'
    const LAST_NAME = 'Doe'

    // We find the form on the page, type in our predefined values and submit the form
    cy.get('form')
      .within(() => {
        cy.get('input[name="first_name"]').type(FIRST_NAME)
        cy.get('input[name="last_name"]').type(FIRST_NAME)
      })
      .submit()

    // We wait our app to send the request we stubbed out
    cy.wait('@createUser').then(({ response, request }) => {
      // and assert that the values that where sent to the server are the ones we typed in
      expect(request.body.firstName).to.equal(FIRST_NAME)
      expect(request.body.lastName).to.equal(LAST_NAME)

      // We want to make sure we are redirected to the correct url using the id that was created for the user
      cy.location().should(loc => {
        expect(loc.pathname).to.eq(`/users/${response.body.id}`)
      })

      // We want to make sure that the form is populated with the values that were returned from our api
      cy.get('form').within(() => {
        cy.get('input[name="first_name"]').should('have.value', FIRST_NAME)
        cy.get('input[name="last_name"]').should('have.value', LAST_NAME)
      })
    })
  })  

So basiclly all we had to do to make the transition to mirage is define the route handler (which you need to do regradless) and remove one line from our test file.

• When I visit /repl, new repl is created, user is redirected to their unique REPL url /repl/123, and user is given edit token in localStorage.
• When on a REPL url /repl/123, and user with token starts editing, status bar says "You have unsaved changes." Button in title bar says "Save". When clicked, REPL is updated and message clears.
• When on a REPL url /repl/123, and user without token starts editing, status bar says "You have unsaved changes." Button in title bar says "Fork and save". When clicked, new REPL is created, user redirected to new URL /repl/456, and message clears.

Placeholder issue for things we would include in a cookbook.

• Using Mirage with JSON:API
• Delaying db writes
• UUIDs instead of auto incrementing ID. Also, making UUIDs application wide.
• Handling relationships with /user/:userId/posts style urls
• Delayed responses and server timeouts
• Using Mirage for demos (mention changing the timing)
• Intercepting network requests and modifying some of the JSON
• Router handlers with query params
• Binary data
• Streaming responses
• Persisting the database locally so it survives reloads
• Including all relationships by default
• Shorthand nested resources server.get('/articles/:id/comments')

Our setup right now renders pages that haven't been SSR'd as / which ends up in screwy UI. SSR'ing pages dynamically using Router helps (#41) but it'd be good to have a more robust fallback in case SSR is absent and the app renders fully on client. Not sure why it doesn't work right now.

1. Create a server

• Show a new Server, add a get /movies that returns a static list of movies.
• The app makes a network request.

2. Use the database

• Change the route handler from a static list of movies to use the db.
• Add a route handler to POST a movie using the db.

3. Use factories

• Show fixtures/seeds that has movies and directors relationships
• Refactor to using server.creates

4. Write tests

miragejs/miragejs#677